Nick B Nick B - 1 year ago 120
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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download