Menu
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:
<html> <head> <style type = "text/css"> table.rule1 tr td { background-color: #ff0000; } td.rule2 { background-color: #ffff00; } </style> </head> <body> <table class = "rule1"> <tr> <td>abc</td> </tr> <tr> <td class = "rule2">abc</td> </tr> </table> </body> </html> 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 <div>, like:
<td class = "rule2"><div>abc</div></td> ...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?
576
Think of inline styles as having a specificity weight of 1-0-0-0 . The only way to override inline styles is by using !
I'd like to point out here that although ! important is not a CSS selector, it is a keyword that is used to forcefully override a CSS rule regardless of the specificity value, origin or source order of a CSS selector.
Since the third rule (C) has the highest specificity value (1000), this style declaration will be applied.
CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. Overriding: Overriding in CSS means that you are providing any style property to an element for which you have already provided a style.
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.
50
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
