CSS: How to select only the first non-adjacent sibling after the element
css, css-selectors, html
Solution
You should use the below setting:
p:hover ~ div ~ div {
display:none;
}
This would set the display back to none for all `div` after the first `div` following the hovered paragraph.
div {
display: none;
}
p:hover ~ div {
display: block;
}
p:hover ~ div ~ div {
display: none;
}
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d3</div>
Problem
I have an HTML page like this: ``` <p></p> <p></p> <p></p> <div></div> <p></p> <p></p> <p></p> <div></div> ``` and this pattern continues. Normally the div elements should not display so: ``` div{display:none;} ``` But when a paragraph is hovered, the first div element after that should be displayed: ``` p:hover+div{display:block;} ``` but this works only for the previous `p` . and this: ``` p:hover~div{display:block;} ``` shows all `div`s after the hovered `p` not just the first one after. How could I display only the first non-adjacent div after the hovered `p`? here is the demo Actually I am looking for a selector like `first-sibling`.