Nick B Nick B - 4 months ago 54
CSS Question

CSS: Selecting Nested Adjacent Sibling

For markup such as:

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

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

How do I select
when hovering over


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.