Nick B Nick B - 1 month ago 20
CSS Question

CSS: Selecting Nested Adjacent Sibling

For markup such as:

<span class="location-title-container">
</span>

<div class="content-panel">
<div class="floor-left-panel"></div>
<div class="floor-right-panel"></div>
</div>


How do I select
.floor-left-panel
when hovering over
.location-title-container
?

Answer

You have to use a adjacent selector to get the element right after it. Your selector would look like this:

.location-title-container:hover + .content-panel .floor-left-panel { … }

Just for your information, you should not use :hover on span tags. They are not accessible by default. You should add some WAI ARIA role tags.

Comments