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.
Related
I want to do something like this .horizontal-nav:not(.horizontal-nav.responsive-nav-enabled)
i.e. I want to apply styles of .horizontal-nav only if the div does not have the .responsive-nav-enabled class. If it has both classes then the styles of .horizontal-nav must not apply. Is it possible?
You need to use .horizontal-nav:not(.responsive-nav-enabled) to get the desired result:
.horizontal-nav {
height: 20px;
border: thin solid;
}
.horizontal-nav:not(.responsive-nav-enabled) {
background-color: red;
}
<div class='horizontal-nav'></div>
<div class='horizontal-nav responsive-nav-enabled'></div>
The problem with your original selector is that it is invalid and rejected by the browser. :not accepts a simple selector while .horizontal-nav.responsive-nav-enabled is a sequence of simple selectors.
i have this little problem, i have <span class="a a">some text</span>.
i would like to apply css like this:
.a.a{
color: red;
}
but it does not work, can anyone help me with this?
Thanks!
Specifying the class twice in the markup doesn't make any difference than specifying it just once.
However, from what I have observed, creating a rule with same selector twice, emphasizes it more, (observed in Firefox).
So, with the following rules,
.someclass.someclass
{
color: blue;
}
.someclass
{
color: red;
}
The one with color: blue; takes precedence.
Up until just a few moments ago, I thought for sure that selector "distance" affected which css styles would be applied. Here's what I mean by distance:
.class-2 .target {
background-color: green;
}
.class-1 .target {
background-color: red;
}
<div class="class-1">
<div class="class-2">
<p class="target">Hello World!</p>
</div>
</div>
In this example, I guess I expected that the .target element would have a green background color--since it seems like the .class-2 .target style is more specific--at least, target is more closely inside class-2 than class 1. But this is not the case. Apparently the only thing affecting the priority is the order they were declared in.
This seems really strange to me; I guess I assumed that CSS rules were applied from the outside in, or at least that that was a factor.
What do I do when I need a classes styles to be applied based on which class it is more closely inside. Is there any way to do this?
For example, in this JSFiddle, how would I get the backgrounds to be appropriately red and green colored? https://jsfiddle.net/emsca2ww/3/
In my specific case I need this because I am using a generally 12 column grid, and I need to (in some situations) set a 16 column grid context inside that.
In this specific case you can use the child selector: >
https://jsfiddle.net/emsca2ww/7/
.class-2 > .target {
background-color: green;
}
.class-1 > .target {
background-color: red;
}
This only works for parent/child elements. Otherwise you would have to introduce more parent/child relationships if needed or rethink how you are using the selectors.
Selectors have specificity and cascade order. The above selectors have the same specificity because they are both composed of two classes. This falls back to cascade order. They exist in the same stylesheet as well, so the final priority rule is applied: order in the CSS document.
If you want .class-2 to have higher priority than .class-1, you have to move the selector after it in the stylesheet:
.class-1 .target {
background-color: green;
}
.class-2 .target {
background-color: red;
}
However, this has nothing to do with the HTML itself. There is no selector for closeness between parents and children in the HTML document. You could do something like:
.class-2 > * > .target
But this selector only works if .target is a grandchild.
There is no distance priority in CSS, the only rules for priority are:
the number of ids
the number of classes, pseudo-classes
the number of elements, pseudo-elements,
the * selector
as defined in http://www.w3.org/TR/selectors/#specificity
To achieve what you want, you need to add some classes in your css:
<div class="foo class-1">
<div class="foo class-2">
<p class="target">Hello World!</p>
</div>
</div>
.class-1 .target, .foo .class-1 .target, .foo .foo .class-1 .target {
background-color: red;
}
.class-2 .target, .foo .class-2 .target, .foo .foo .class-2 .target {
background-color: green;
}
By exemple. But if you have a lot of nesting, it could become a nightmare, and you should consider another way.
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.
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.