stormec56 stormec56 - 1 month ago 7
HTML Question

Adjacent Sibling Not Working - CSS3 Selectors

I want to make

:hover
changes on child element.

Let's say I have the below HTML:

<div class="wrap">
<div class="adjacent_sibling">Placeholder text</div>
<div class="adjacent_sibling class">Placeholder text</div>
</div>


I can make changes on the child element with CSS like this:

.wrap:hover .class {
/*CSS to come here*/
}


but can't I make changes like this:

.wrap:hover + .wrap > .adjacent-sibling{
/*CSS to come here*/
}


or:

.wrap:hover + .adjacent-sibling {
/*CSS to come here*/
}


How can this be achieved?
I need to target the adjacent sibling if it is the child (children). This is for learning purposes only.

Answer

+ Refers to the next element and not to children.

If you want its need be like this:

.wrap:hover > .adjacent-sibling,
.wrap > .adjacent-sibling {
/*CSS to come here*/
}

or:

.wrap:hover > .adjacent-sibling {
/*CSS to come here*/
}

Edit: How target adjacent siblings in the children:

.wrap:hover > .adjacent-sibling + .adjacent-sibling.class {
/*CSS to come here*/
}