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 stop a text link to go up each time it is selected?

    How to make this image blur with css

    How to apply effect just to background image and not text

    How to achieve straight shadow with CSS?

    CSS exit box how to? [closed]

    How to achieve a “mini” select style using Bootstrap (or straight CSS)?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to style text in JQuery?

    How to make the parent div adjust in size to contain the CSS-Rotated child div?

    How to create a

    How to stop image shrinking when page is resized horizontally in CSS

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    how to drag and drop css file in eclipse?

    How do I have a div go around another div?

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to make CSS column not be forced down

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]

    how to add css code on jquery?

    How to keep a floating div centered on window resize (jQuery/CSS)

    how to know about the font information in a psd file?

    How to do fallback for browser-specific css expressions

    How is Bootstrap's `nav` class making anchors move to their own line

    How can I line up the two containers in view?

    How do I use CSS to let one or more elements fill remaining space?

    Some doubts about how make an image clickable using CSS

    How does CSS3 flexbox negative-flex work?

    How to add inset box-shadow to mapbox-div?

    How to load local copy of bootstrap css when the cdn server is down?

    How to cancel specific one element at external CSS?