How to simplify my CSS stylesheet?

Question

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!

Mohamad · Accepted Answer · 2013-08-19 23:41:29Z

5

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

edited Aug 19, 2013 at 23:41

answered Aug 19, 2013 at 23:35

Mohamad

35.4k34 gold badges144 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

No Results Found Over a year ago

Double quotes or single, it doesn't matter.

Mohamad Over a year ago

I suppose that's true, but it does make a difference when you need single quotes inside attributes; as part of the title text, for example.

mikes000 · Accepted Answer · 2013-08-19 23:36:05Z

You could create a class name that tables that are the same style would share

CSS

.similar-table .div{
    color:black;
}


.similar-table input{
    color:red;
}

HTML

<div class='table_test similar-table'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

<div class='table_name similar-table'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

CSS:

.red{
  color:red;
}
.black{
  color:black;
}

HTML:

<div class='table_test'>
 <div class='div'>......
  <table>
   <tr>
    <td><input class="black">...</td> 
   </tr>
 </table>
</div>

<div class='table_name'>
 <div class='div'>......
  <table>
   <tr>
    <td><input class="red">...</td> 
   </tr>
  </table>
</div>

The best part? This CSS will work wherever you need it to.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 19, 2013 at 23:35

Chris Sobolewski

13k13 gold badges65 silver badges97 bronze badges

2 Comments

No Results Found Over a year ago

Class names like red and float-left defeat the point of CSS a little. I have definitely seen people do stuff like .blue-text {color:black !important} and other such nonsense.

Chris Sobolewski Over a year ago

That may be, but these were example class names not intended for actual use. I presumed the OP's .div was the same. At least I hope it was...

Collectives™ on Stack Overflow

How to simplify my CSS stylesheet?

3 Answers 3

2 Comments

Comments

CSS:

HTML:

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

CSS:

HTML:

2 Comments

Linked

Related