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.
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.
Color is not applied as per CSS on the 3rd row, using first child(div.multiple-alerts .normal:first-child span).
https://jsfiddle.net/Lh6cpzeb/
div.multiple-alerts .high:first-child span{ color: yellow; }
div.multiple-alerts .normal:first-child span{ color: yellow; }
<div class="multiple-alerts">
<div class="cls high"><span>high</span></div>
<div class="cls high"><span>high</span></div>
<div class="cls normal"><span>normal</span></div>
<div class="cls normal"><span>normal</span></div>
</div>
The CSS is being applied the correct way, but I think your understanding of how the rules work may be slightly off. You're selecting the first child of all divs with class multiple-alerts which also has the class of normal. Well, the first child of multiple-alerts does not have the class normal (at least in the snippet you included), so your selector matches exactly zero elements.
Now, you may be tempted to go for something like first-of-type, but that only applies to tags, not classes. So, here's a workaround that you might find useful:
Let's say the standard colour for these spans is black, we will set all the spans inside .normal with yellow colour, then override it for all but the first one, like so:
div.multiple-alerts .normal span {
color: yellow;
}
div.multiple-alerts .normal ~ .normal span {
color: black;
}
If you're not sure how this is working here, the ~ works similarly to the +, but is broader. The + can only match with the very next sibling, whereas the ~ can match with any succeeding sibling - i.e. after, but not before.
:nth-child(i) selector will solve the problem
div.multiple-alerts .cls:nth-child(3) span{ color: yellow; }
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
I have tried all different combinations but don't seem to be able to get it right. Can someone help by telling me how I can define this in less given the starting point of:
.btn {
}
You could use the LESS parent selector, &, to reference the parent selector.
.btn {
&.btn-primary {
color: red;
}
}
In doing so, you are essentially selecting .btn elements that also have the class .btn-primary.
The above LESS will compile to the following:
.btn.btn-primary {
color: 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.