侄子的 css 选择器是什么？

Question

I have a series of elements with the following html format:

<div class="wrap">
   <div class="hoverArea"> ... </div>
   <div class="caption"> ... </div>
   <div class="image"> ... </div>
</div>

with.hoverArea, .caption, .image { position: absolute; }

When user hovers over the 'hoverArea' the (sibling) image enlarges with:

.hoverArea:hover ~.image { width: 300px; }

This worked fine, but I now need to put the image in a parent/wrapper

<div class="wrap">
   <div class="hoverArea"> ... </div>
   <div class="caption"> ... </div>
   <div class="parent">
      <div class="image"> ... </div>
   </div>   
</div>

What is the selector I need for the nephew? I thought it was just:

.hoverArea:hover.image { width: 300px; }

Or

.wrap.hoverArea:hover.parent.image {... }

But these doesnt seem to work.

And would it be any different if I was to add the parent with a '::before'?

Answer 1

try this

~ : for sibling selector
> : for child selector
In Sentence, .hoverArea 's sibling is .parent and it's child is .image

.hoverArea:hover ~ .parent > .image{
  width: 300px;
}