How to simplify my CSS stylesheet?


Tags: html,css

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!



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'>


    CSS Howto..

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How do I make this CSS work to have semi-transparent border?

    How do I properly set width to a percentile and keep a min-width in pixels?

    How can I make an image carousel with only CSS?

    How can I create a horizontal selector in a form with only html and css?

    How to change CSS style without id or class

    How to make colspan work without affecting width of the other rows

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to CSS two vertical cylinders

    How to CSS for today's Internet? [closed]

    How do I get my body to the bottom of my page OR further if necessary?

    How to make this CSS layout

    How to prevent css auto hyphenation for email addresses

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    How to Convert RGB to HEX ( for Gradients )

    How to get dimensions for a background image when background-size is set to contain?

    How to set CSS hover on input

    how to place div next to centered div css

    How to make a responsive text inside a bootstrap button

    How to reverse z-index on stacked divs

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How to add custom css responsive in Avada WP Theme?

    How can I use CSS to preserve line breaks in an HTML block?

    How to ensure updated files are served instead of cached ones?

    how to make body tag elastic?

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    how to make the file input field wrap?

    how to make an ul lay out horizontally?

    How to add image after button/div css?