С изменением CSS siblings state on hover

Question

Простое объяснение: Я хочу изменить цвет рамки братьев и сестер, если этот элемент является последним элементом этого div.

Подробнее В глубине

Структура

<div id="parent"> 
    <div id="child"> 
     <div class="grand-child"></div> 
     <div class="grand-child"></div> 
     <div class="grand-child"></div> 
     <div class="grand-child"></div> 
     <div class="grand-child"></div> 
    </div> 
    <div id="sibling"></div> 
</div> 

При наведении курсора на последнем гран-ребенка в детском DIV, мне нужны братья и сестры цвет границы, чтобы изменить.

Answer 1

Вы пробовали использовать селектор css :last-child? В вашем примере, это может выглядеть примерно так:

div.grand-child:last-child:hover { 
 
    border: 1px solid #000; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    <div class="grand-child">First item</div> 
 
    <div class="grand-child">Second item</div> 
 
    <div class="grand-child">Third item</div> 
 
    <div class="grand-child">Fourth item</div> 
 
    <div class="grand-child">Fifth item</div> 
 
    </div> 
 
    <div id="sibling"></div> 
 
</div>

Надежда, что помогает!