This question already has answers here:
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed 8 years ago.
I have two css expressions:
.firstexpression.secondexpression (without space)
and
.firstexpression .secondexpression (with space)
What is the difference?
The first applies to elements with BOTH classes applied, the second to a child element with .secondexpression with a parent with .firstexpression
.firstexpression.secondexpression{
/* styles */
}
Applies to:
<div class='firstexpression secondexpression'>Applies to this element</div>
Vs..
.firstexpression .secondexpression{
/* styles */
}
Applies to:
<div class='firstexpression'>
<div class='secondexpression'>Applies to this element only</div>
</div>
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
How are the points in CSS specificity calculated
(7 answers)
Closed 2 years ago.
Which of the following two selectors has a higher CSS specificity?
Selector 1 -> #object h2::first-letter
Selector 2 -> body .item div h2::first-letter:hover
My Answer is Selector 1, I calculated 111 for that.
Selector 2 gave me a specificity of 6.
Am I right?
You can't hover over a ::first-letter, however, all things being equal, the first selector is stronger:
/* Selector 1 -> #object h2::first-letter */
#this h2::first-letter{
color: red
}
/* Selector 2 -> body .item div h2::first-letter:hover */
body .item div h2::first-letter{
color: blue;
}
<div class="item">
<div id="this">
<h2>This is a title</h2>
</div>
</div>
The first one has a higher specificity since it actually contains an ID, which takes precedence over almost everything else.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have two elements inside a wrapper div. The second sibling in the view sometimes get an active class (as per the logic of UI)
<div id="wrapper">
<div>some content</div>
<div class="active">some other content</div>
</div>
In those cases (when second child has an active class) - How can I target the 1st div from a css selector.
I've tried general sibling of the active div
.active ~ div
But this doesn't work since the target div should follow the selected div and should not be before it.
How to target a div which comes before another active div.
You can target the div which is not active (inside wrapper class)
.wrapper {
> div:not([class='active']) {
// apply styles
}
}
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
I'm using a CMS(Joomla), and they allow me to put a class for a tag and then I can modify the css for just that particular page.
I'm trying to use MDN to find the answer but I couldn't exactly get it to work the way I wanted.
Here is the JSFiddle they had on their page, I was messing around with it:
https://jsfiddle.net/amvz5dkb/13/
<div class="divclass">
<span class="spanclass">Span #1, in the div.
<span="betterspanclass">Span #2, in the span that's in the div.</span>
<span="betterspanclass">Span #3, in the span 1.</span>
</span>
</div>
<span>Span #4, not in the div at all.</span>
And here is my CSS
.divclass > .betterspanclass {
background-color: red;
}
This doesn't work, only
.divclass > span {
background-color: red;
}
Seems to have an effect but it doesn't affect span 3 at all, only span 1 and span 2. I want to make the background red for every betterspanclass inside divclass. Is this possible?
This question already has answers here:
What is the difference between these two style rules? [duplicate]
(2 answers)
CSS Child vs Descendant selectors
(8 answers)
Closed 4 years ago.
I have found two selectors
div p
and
div>p
What is the exact difference between these two css selectors?
The first is "descendant" selector: p anywhere inside div
div p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>
The second is "child" selector: p directly under div
div > p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>
div p this style will select all the p elements under the div whether the p is inside another div.
The div>p will only select the p which are under the div. if there is another div into the same div which has p element as well it will not select that p.
This question already has answers here:
How to skip first child?
(5 answers)
Closed 7 years ago.
Does CSS make possible selecting all the child elements except a first child?
Yes, using :not(:first-child)
parent child:not(:first-child) { /* style */ }
Example:
div span:not(:first-child) {
color: red;
}
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
Just use the :nth-child selector:
:nth-child(n+2) {}
It will select all children starting with the second one. Or, if all children have the same class (or element tag) you can also use
#parent .class + .class {}
#parent div + div {}
You can use div:not(:first-child).