CODEWITHSUNDEEP
htmlcsslayoutcss-selectors
Pradeep
Pradeep

Reputation: 1223

Cannot override previously defined css rule

I have a simple table and associated CSS rules for the table as shown:
HTML:

<table id="depts">
            <tr>
                <th>Department</th>
                <th>Posts</th>
            </tr>

            <tr>
                <td colspan="2" class="none"> No Posts in this department</td>
            </tr>
</table>

CSS:

#depts {
      width: 500px;
      font-family: 'Open Sans', sans-serif;
      border-spacing: 0;
      border: 1px solid black;
  }
  #depts td{
      border-top: 2px solid #607D8B;      
      text-align: left;
      font-family: 'Patua One', cursive;
      padding: 10px;
  }
  .none {
      text-align: center;
      padding-top: 40px;
  }

As it can be seen, I've added a new class for a td named none.The text-align property has been changed from left to center.But it is not reflected, when I run the page.The output is as below: css class not working

Why is'nt the new rule being ignored.Does colspan has anything to do with it?

Upvotes: 1

Views: 837

Answers (4)

Alexis
Alexis

Reputation: 5831

just add #depts before your .none declaration.

.none class have a lower priority than #depts td.

You can take a look at priority order here or here

#depts {
      width: 500px;
      font-family: 'Open Sans', sans-serif;
      border-spacing: 0;
      border: 1px solid black;
  }
  #depts td{
      border-top: 2px solid #607D8B;      
      text-align: left;
      font-family: 'Patua One', cursive;
      padding: 10px;
  }
 #depts .none {
      text-align: center;
      padding-top: 40px;
  }
<table id="depts">
            <tr>
                <th>Department</th>
                <th>Posts</th>
            </tr>

            <tr>
                <td colspan="2" class="none"> No Posts in this department</td>
            </tr>
</table>

Upvotes: 1

bubesh
bubesh

Reputation: 426

ID has more priority than class so you can add

 #depts .none {
      text-align: center;
      padding-top: 40px;
  }

or

.none {
      text-align: center!important;
      padding-top: 40px;
  }

CSS Specificity can be found here

Upvotes: 1

Jordi Nebot
Jordi Nebot

Reputation: 3401

Your rule is ignored (not really ignored) because it has lower specificity (See: CSS Specificity: Things You Should Know).

You could use:

#depts td.none {
    text-align: center;
    padding-top: 40px;
}

Upvotes: 1

Corina Gheorghe
Corina Gheorghe

Reputation: 198

Add the "important" flag to the none class like this:

.none {
      text-align: center!important;
      padding-top: 40px;
  }

Upvotes: 1

Related Questions