CSS override rules and specificity

Question

I m often confused by CSS override rules  in general  I realize that more specific style-sheets override less specific ones  and that specificity is determined by how many selectors are specified   There s also the  important keyword  which plays a role as well   So  here s a simple example  I have a table with two table cells   The table itself has a CSS rule which applies to all cells within the table   However  the second table cell has it s own rule which should override the general table rule    lt html gt   lt head gt   lt style type    text css  gt   table rule1 tr td       background-color   ff0000     td rule2       background-color   ffff00      lt  style gt    lt  head gt   lt body gt       lt table class    rule1  gt           lt tr gt               lt td gt abc lt  td gt           lt  tr gt           lt tr gt               lt td class    rule2  gt abc lt  td gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt    But    when I open this in a browser  I see that rule2 doesn t override rule1   Okay - so I guess I need to make rule2 more  specific   but I can t really define any further selectors since I just want to apply it to a particular table cell   So  I tried putting the   important keyword  but that doesn t work either   I m able to override rule2 if I wrap the text node in a  lt div gt   like            lt td class    rule2  gt  lt div gt abc lt  div gt  lt  td gt       and then make the CSS rule more specific   td rule2 div       background-color   ffff00   important     This works  but it s not exactly what I want   For one thing  I want to apply the rule to the table cell  not the DIV   It makes a difference because you can still see the background color of rule1 as a border around the div   So  what do I need to do to tell CSS I want rule2 to override rule1 for the td element

User · Answer

The important needs to be inside the    td rule2 div       background-color   ffff00  important       in fact i believe this should override it  td rule2   background-color   ffff00  important

User · Answer

To give the second rule higher specificity you can always use parts of the first rule  In this case I would add table rule1 trfrom rule one and add it to rule two   table rule1 tr td       background-color   ff0000     table rule1 tr td rule2       background-color   ffff00      After a while I find this gets natural  but I know some people disagree  For those people I would suggest looking into LESS or SASS

User · Answer

The specificity is calculated based on the amount of id  class and tag selectors in your rule  Id has the highest specificity  then class  then tag  Your first rule is now more specific than the second one  since they both have a class selector  but the first one also has two tag selectors   To make the second one override the first one  you can make more specific by adding information of it s parents   table rule1 tr td rule2       background-color   ffff00      Here is a nice article for more information on selector precedence

[html] CSS override rules and specificity

Examples related to html

Examples related to css