This question already has answers here:
What is the specificity of the attribute selector?
(3 answers)
Closed 6 years ago.
If more than one CSS rule applies to an element and specifies the same property,
then CSS gives priority to the rule that has the more specific selector.
That means,
An ID selector is more specific than a class selector, which in turn is more
specific than a tag selector, as shown below,
#id1 {
color: blue;
}
.class1 {
color: red;
}
p {
color: green;
}
<p class="class1" id="id1">Sham</p>
the output is a paragraph text in blue color.
For the below code,
p[data-colour] {
color: yellow;
}
#id1 {
color: blue;
}
.class1 {
color: red;
}
p {
color: green;
}
<p class="class1" id="id1" data-colour>Sham</p>
With respect to attribute selectors, What does CSS rule specificity say?
It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
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.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I am trying to apply color only parent level, by using :not() operator. but no result. is it possible?
html:
<header>title <span>123</span></header>
CSS:
header:not(header span){
color: green;
}
<header>title <span>123</span></header>
header:not(header span){
color: green;
}
I would use two css rules, one specifically targeting the span to unset the color: green rule applied by the header css rule.
header {
color: green;
}
header span {
color: initial;
}
<header>title <span>123</span></header>
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 5 years ago.
CSS
.wrapper > * {
background: deepskyblue;
}
.item {
background: deeppink;
}
HTML
<div class="wrapper">
<div class="item">
Test
</div>
</div>
Above is my CSS class and HTML. So since I have gave style for .item class below the wrapper > * here.
But the item's background is still getting deepskyblue.
Should it be deeppink?
I know I can use !important in .item to get it deeppink but why is this happening in this order is what I want to know.
To understand why you aren't seeing the result you want, you need to first understand CSS Specificity and what weight selectors have (which is too long of a discussion as an answer to this question).
First, your original set of rules:
.wrapper > * { // [0,0,0,1,0]
background: deepskyblue;
}
.item { // [0,0,0,1,0]
background: deeppink;
}
Both of these rules have a specificity of [0,0,0,1,0] because of the single class within each selector. The * selector has a weight of 0, so it does not add any weight to the first rule. Since both rules affect the same property on the same element, the rule that comes last wins: in this case, background: deeppink;
However, your actual rules are different:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.item[_ngcontent-c1] { // [0,0,0,2,0]
background: deeppink;
}
In this case, the first rule wins because it is more specific. Attribute selectors have a weight of [0,0,0,1,0].
To remedy this, you have to make a selector that equals or surpasses the specificity of the rule to be overridden.
For example:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.wrapper[_ngcontent-c1] > .item[_ngcontent-c1] { // [0,0,0,4,0]
background: deeppink;
}
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 8 years ago.
I'm trying to use the :not() property to exclude a pair of classes from a rule, e.g.:
*:not(.class1, class2) { display: none; }
However, it looks like the not() property doesn't support comma separated classes, as show in this fiddle.
HTML:
<div class='one'>
foo
</div>
<div class='two'>
foo
</div>
<div class='three'>
foo
</div>
<div class='four'>
foo
</div>
CSS:
div {
background-color: #CBA;
}
div:not(.one) {
background-color: #ABC;
}
div:not(.one, .three) {
color: #F00;
}
The first and second rules get applied, but the third doesn't.
I can't do *:not(.class1), *:not(.class2) because any element which has class2 will be selected by *:not(.class1) and vice versa.
I don't want to do
* { display: none;}
.class1, .class2 { display: inline; }
because not all .class1 and .class2 elements have the same original display property, and I want them to retain it.
How can I exclude multiple classes from a rule, either with the not() property or otherwise?
You can use:
div:not(.one):not(.three) {
color: #F00;
}
Fiddle
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.