CODEWITHSUNDEEP
csscss-selectorshoversiblings
Case
Case

Reputation: 4272

With CSS change siblings state on hover

Simple Explanation: I want to change a siblings border color if the element is the the last element of this div.

More In depth

Structure

<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>

If you hover over the last grand-child in the child div, I need the siblings border color to change.

Upvotes: 0

Views: 395

Answers (1)

Amituuush
Amituuush

Reputation: 678

Have you tried using the :last-child css selector? In your example, it could look something like this:

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>

Hope that helps!

Upvotes: 1

Related Questions