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; }
Related
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.
I've looked around for information about this, but since I'm not sure of the technical names of the process, I can't seem to find an answer.
Let say I have this:
.some_class {}
.some_class .sub_div {}
<div class="some_class">
<div class="intermediate_div">
<div class="sub_div">
From my understanding, the selector .some_class .sub_div should apply to the div 'sub_div'. But it appears this is not the case as I always have to go back and change it to '.some_class .intermediate_div .sub_div'.
Is this correct or am I missing something?
My impression was that .some_class .sub_div should apply to any instance of .sub_div within the .some_class element.
.some_class .sub_div would work without any confusion. But you're actually right that .some_class .intermediate_div .sub_div would work but .some_class .sub_div wouldn't because of css specificity.
Look below for an example:
div.intermediate_div .sub_div {
color: red;
}
.some_class .sub_div {
color: blue;
}
What would you think color blue is applied? No. The red color is applied because div.intermediate_div .sub_nav higher specificity than .some_class .sub_div and thus in that case you may be wondering to see that
.some_class .intermediate_div .sub_div{
color: blue;
}
works. Because it has more specificity than previous selector.
Look more about css specificity here and in my previous answer.
CSS will apply the most specific rule to each element.
In the case of two equally specific rules, it will apply the last defined rule.
Take a look at this fiddle, which uses the following html:
<div class="some_class">
Some class
<div class="intermediate_div">
Intermediate
<div class="sub_div">Sub Div</div>
</div>
</div>
and this CSS:
.some_class {
color: red;
}
.intermediate_div {
background-color: blue;
}
.intermediate_div .sub_div {
background-color: orange;
}
.some_class .sub_div {
background-color: green;
}
All of the text is red, because some_class is red, and everything inside that div inherits that style.
intermediate_div has a blue background, which would be inherited by sub_div. But sub_div has two more specific rules defined.
Both of those rules with two class selectors are equally specific. Both are more specific than the blue background because they select based on two classes not one. The orange background is ignored, because the last defined rule is used when they are equally specific.
When you use an element id, that is more specific than a class because ids are (supposed to be) unique. So in this modified fiddle, you can see that sub_div takes styles from #div1 even though that rule is defined first and only has one selector. It still takes precedence over rules defined later and rules with two selectors, because it uses a unique id.
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.
I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.
I wanted to select an element outside of my hover element. I found out that using the + sign you can target an element that comes after the hover element. A small example (in LESS):
header{
display: inline-block;
div#bg_2{
color:#000;
}
div#container{
float:left;
&:hover{
& + nav {
ul{
opacity: 0;
}
li{
.transition(1200ms, ease-in-out);
margin-left:-100px;
}
}
}
}
nav{
height:30px;
}
}
So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the bg_2 element.
The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.
However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.
Since you can’t use !, there is currently no way to select what you want with pure CSS.
See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.
CSS alone can't currently achieve what you're after. We have sibling selectors (+ and ~), but the element being targeted must come after the first element.*
As a simple example, check out this fiddle. Given this markup:
<p class="one">One</p>
<p class="two">Two</p>
and this CSS:
.one ~ .two { background: red; }
.two ~ .one { background: green; }
You might expect .one to end up green and .two red. In reality, only .two receives a background colour, because the second line is trying to style an element that comes earlier in the DOM.
* + is the adjacent sibling combinator, ~ the general sibling combinator. See this CSS Tricks article for details. They are very similar: + will only target an element that is directly after another specific element whereas ~ will target a sibling that appear anywhere after it.
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated