Given the following mark-up...
<div id="Header">
foo
</div>
And the following stylesheet...
/******************Exceptions******************/
#Footer, #Header,
#Footer a, #Header a { color: #f8f8f8; }
/******************Classes******************/
.Highlight, a.Highlight { color: #B1D355; }
.Notification, a.Notification { color: Red; }
Why is my link still off-white (F8F8F8) rather than green (B1D355)?
Shouldn't using the class Highlight override the color settings for Header and Footer since it comes after their declarations?
It's all about weight. A class selector gets trumped by an ID selector.
#Footer a
will always get precedence over
.Highlight or .Highlight a
Make your selector
#Footer .highlight a
and you should be fine.
CSS priority
ID selector > class selector > attribute selector
For the same priority, the later has the higher priority.
.class1 {
color: black;
}
.class2 {
color: red;
}
It will be red.
To have more priority, use !important
For your problem, #Footer is an ID selector has higher priority than .Highlight, a class selector.
ID has a higher priority than class in CSS:
Use #Header a.Highlight { color: #B1D355; }
CSS rules are not just applied based on the "last parsed, last applied". It also depends on how specific and unique the rule is to that element. Since you're only specifying a class selector, the path that included the id is getting a higher priority.
Related
I'd like to understand how CSS selectors work with property collisions. How is one property selected over another one?
div {
background-color: red;
}
div.my_class {
background-color: black;
}
div#my_id {
background-color: blue;
}
body div {
background-color: green;
}
body>div {
background-color: orange;
}
body>div#my_id {
background-color: pink;
}
<div id="my_id" class="my_class">hello</div>
How does selector priority work?
I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:
CSS 2.1 Section 6.4.3:
A selector's specificity is calculated as follows:
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
If the specificities are equal, then CSS 2.1 Section 6.4.1 comes into play:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have equal specificity, whichever is defined last in the stylesheet(s) wins. <p class="a b">...</p> and <p class="b a">...</p> will be styled identically, based on the definition order of .a and .b.
Element
Class selectors
ID Selectors
Inline styles
!important
In order, 1 is the lowest specificity and 5 is the highest.
https://youtu.be/NqDb9GfMXuo will shown details to demo it.
What you are interested in is specificity.
Firebug is a great tool to help inspect this. But other browsers also have built in tools for inspecting the applied CSS rules.
You can refer the full answer here Mozilla documentation
Start from the most specific:
id selectors > class selectors > type selectors(normal h1, p tag and so on..)
!important always wins, but it is considered a bad practice.See the link above.
The best way is to experiment with it:
<!-- start class vs id -->
<p class="class1" id="id1">.class vs #id: The winner is #id</p>
<!-- upper vs bottom -->
<p id="id2">the very bottom is the winner</p>
<!--most specific is the winner -->
<p id="id3">the most specific</p>
<!--pseudo and target selector -->
<h3>pseudo vs type selector</h3>
<!-- !important is more important! -->
<h1 id="very-specific">HI! I am very important!</h1>
</body>
CSS:
#id1{
color: blue;
}
.class1{
color: red;
}
#id2{
color: yellow;
}
#id2{
color : green;
}
body p#id3{
color :orange;
}
body p{
color : purple;
}
body{
color : black;
}
h3::first-letter {
color: #ff0000;
}
h3{
color: CornflowerBlue ;
}
h1{
color: gray !important;
}
body h1#very-specific{
color: red;
}
Here's a test case.
I'd like to understand how CSS selectors work with property collisions. How is one property selected over another one?
div {
background-color: red;
}
div.my_class {
background-color: black;
}
div#my_id {
background-color: blue;
}
body div {
background-color: green;
}
body>div {
background-color: orange;
}
body>div#my_id {
background-color: pink;
}
<div id="my_id" class="my_class">hello</div>
How does selector priority work?
I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:
CSS 2.1 Section 6.4.3:
A selector's specificity is calculated as follows:
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
If the specificities are equal, then CSS 2.1 Section 6.4.1 comes into play:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have equal specificity, whichever is defined last in the stylesheet(s) wins. <p class="a b">...</p> and <p class="b a">...</p> will be styled identically, based on the definition order of .a and .b.
Element
Class selectors
ID Selectors
Inline styles
!important
In order, 1 is the lowest specificity and 5 is the highest.
https://youtu.be/NqDb9GfMXuo will shown details to demo it.
What you are interested in is specificity.
Firebug is a great tool to help inspect this. But other browsers also have built in tools for inspecting the applied CSS rules.
You can refer the full answer here Mozilla documentation
Start from the most specific:
id selectors > class selectors > type selectors(normal h1, p tag and so on..)
!important always wins, but it is considered a bad practice.See the link above.
The best way is to experiment with it:
<!-- start class vs id -->
<p class="class1" id="id1">.class vs #id: The winner is #id</p>
<!-- upper vs bottom -->
<p id="id2">the very bottom is the winner</p>
<!--most specific is the winner -->
<p id="id3">the most specific</p>
<!--pseudo and target selector -->
<h3>pseudo vs type selector</h3>
<!-- !important is more important! -->
<h1 id="very-specific">HI! I am very important!</h1>
</body>
CSS:
#id1{
color: blue;
}
.class1{
color: red;
}
#id2{
color: yellow;
}
#id2{
color : green;
}
body p#id3{
color :orange;
}
body p{
color : purple;
}
body{
color : black;
}
h3::first-letter {
color: #ff0000;
}
h3{
color: CornflowerBlue ;
}
h1{
color: gray !important;
}
body h1#very-specific{
color: red;
}
Here's a test case.
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
Why do people add !important on the end of property declarations in their CSS, and what does it do for them?
For example, ever seen this?:
div{
min-height:100px;
height:auto !important;
height:100px;
}
!important adds importance to a CSS rule so it will have more points to override another declaration with less points. For example:
div {
color: red !important;
}
div#hello {
color: black;
}
A <div> with ID "hello" would still be red.
Why the following code results in red color rather than black ?
HTML:
<div class="error classA" att="A"></div>
CSS:
div {
width: 100px;
height: 100px;
}
[att=A].classA {
background-color: red;
}
.error {
background-color: black;
}
If I remove [att=A], it becomes black, as expected. Why is that ?
It's because of CSS Specificity. The 'red' rule is more specific (elements which have this attribute AND this class) than the 'black' rule (elements which have this class). When you remove the [att=A], they have the same specificity, but because the black rule is later in the file, it wins.
Because in CSS, specificity counts towards the "Cascade" too.
[att=A].classA targets an attribute and a class name.
.error only targets a class name
Because the first is more specific, it gets applied over top of the second.
If you want to forcefully override a previously applied style, you can use the !important declaration:
[att=A].classA {
background-color: red !important;
}
However, I should note, IE ignores the !important declarationhas buggy support for it, so use it with care.
The most specific selector wins, and [att=A].classA is more specific than .error. Without it, the last one declared in the CSS wins, for example:
.error {
background-color: black;
}
.classA {
background-color: red;
}
Would also result in red.