Adjacent Sibling Not Working - CSS3 Selectors

Question

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.

Read it long time ago. I need to target the adjacent sibling if it is the child (children). — stormec56
– stormec56, Commented Oct 28, 2016 at 12:22
"I need to target the adjacent sibling if it is the child" - it can only be either a sibling, or a child. Both together is impossible. — connexo
– connexo, Commented Oct 28, 2016 at 12:50

Zeev Katz · Accepted Answer · 2016-11-01 16:02:57Z

4

+ 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*/ }

answered Oct 28, 2016 at 12:19

2,2732 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

I have already wrote this. How can I target adjacent siblings in the children?

@stormec56 You nedd to use child-selector as @Zeev Katz said above.

And that is the answer to my question! thanks mate. :)

Edit my answer my friend

+ does not refer to the next, but the neighbor element.