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).
Related
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:
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>
This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 8 years ago.
We're trying to control vertical spacing on content and have everything working great except when content follows a div - consider the following:
<div>
<ul>
<li></li>
</ul>
</div>
We'd like to remove top margin from all ul's that immediately follow a div so have been trying:
div + ul {
margin-top: 0;
}
Is this the proper use for this selector?
We just can't seem to get it working - any pointers in the right direction would be much appreciated.
Cheers
Ben
It has the word "adjacent" in it, this means "next to": your ul is not "next to" your div (on the same hierarchical level) but inside it.
What you want is a direct (not recursive) child selector, > so:
div > ul { ... }
And if it only happens to the first child of that div:
div > ul:first-child { ... }
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is this possible with css only? I have the following:
<div class="container">
<img src=#>
</div>
How do I get .container to have a box-shadow (and other styling) when and only when img is in the state :hover?
As people have stated there is no CSS parent selector, for a number of good reasons as stated in the linked duplicate question.
However, with the code you've shown, you can just apply the hover pseudo-selector to your parent element and it will achieve almost the exact same functionality.
So this:
div:hover{
border:1px solid red
}
Would work only because you have a single child, and would have the issue that if you hover adjacent to the img but not directly on it the parent will still have styles applied because its a block element.
You can convert it to inline-block to limit this, like so:
div{
display:inline-block;
}
div:hover{
border:1px solid red;
}
However, this will have implications for how other sibling elements to the parent flow.
You can use jQuery:
$("span").hover(
function () {
$(this).parent().addClass("add-class");
},
function () {
$(this).parent().removeClass("add-class");
}
);
Here is the demo http://jsfiddle.net/Sv6Av/
You can replace span with another tag such as img
Nope. No parent selector in css yet. You will have to resort to js for now. For more explanation read this