CODEWITHSUNDEEP
htmlcsscss-selectors
stormec56
stormec56

Reputation: 162

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.

Upvotes: 0

Views: 82

Answers (1)

Zeev Katz
Zeev Katz

Reputation: 2273

+ Refers to the neighbor element and not to children.

If you want its need to 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*/
}

Upvotes: 4

Related Questions