How to simplify my CSS stylesheet?
css, html
Solution
A few things:
Don't use generic class names like `div`. There's already an element element called `div`. If you want to target it based on nesting, do so using CSS.
.table_name > div {} /* or .table_name div */
And not...
.table_name .div {}
Use specific selectors. Is there a reason why you need to go through `table_name .div table input`? Why not target the input specifically by giving it a class?
<input class="my_input">
And then:
.my_input {
color: red;
}
Finally, it's up to you what style to use, but most people tend to use double quotes around html attributes. For example:
`<div class="table_name">` and not `<div class='table_name'>`
Problem
I am trying to simplify my css selector in CSS sheet I have something like ``` .table_test .div, .table_name .div, .table_company .div{ color:black; } .table_test .div table input, .table_name .div table input{ color:red; } ``` My html is something like ``` <div class='table_test'> <div class='div'>...... <table> <tr> <td><input>...</td> </tr> </table> </div> <div class='table_name'> <div class='div'>...... <table> <tr> <td><input>...</td> </tr> </table> </div> ``` I feel like there are so many selectors clustered together and was wondering if there is a way to make it simpler. Thanks for the help!