html - How to simplify my CSS stylesheet? -

i trying simplify css selector in css sheet

i have 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 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 there many selectors clustered , wondering if there way make simpler. help!

a few things:

don't use generic class names div. there's element element called div. if want target based on nesting, using css.

.table_name > div {} /* or .table_name div */ 

and not...

.table_name .div {} 

use specific selectors. there reason why need go through table_name .div table input? why not target input giving class?

<input class="my_input"> 

and then:

.my_input {   color: red; } 

finally, it's style use, people tend use double quotes around html attributes. example:

<div class="table_name"> , not <div class='table_name'>