CSS: style nth sibling [duplicate]

Question

Is it possible to style the nth sibling in pure CSS?
For example, can we style 4-th or 5-th .child when hover on 1-st .child?

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

update I guess my question was not correct a bit. Excuse me for that.

I meant can I style nth sibling of a .child that I hovered on?

I.e. style 4-th .child when hover on 1-st .child; style 5-th .child when hover on 2-nd, etc.

Answer 1

Sure you can. You use the general sibling selector (~) in combination with :hover.

.child:first-of-type:hover ~ .child:nth-of-type(4) {
  color: red;
}

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

UPDATE

update I guess my question was not correct a bit. Excuse me for that.

I meant can I style nth sibling of hovered .child?

No, since as far as I know there's no way for "counting siblings". You could work-around the problem, say you want to highlight the second sibling of each .child when hovering.

.child:nth-of-type(1):hover ~ .child:nth-of-type(3) {
  color: red;
}

.child:nth-of-type(2):hover ~ .child:nth-of-type(4) {
  color: red;
}

.child:nth-of-type(3):hover ~ .child:nth-of-type(5) {
  color: red;
}

.child:nth-of-type(4):hover ~ .child:nth-of-type(6) {
  color: red;
}

.child:nth-of-type(5):hover ~ .child:nth-of-type(7) {
  color: red;
}

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

To simplify this task, you may want to use a preprocessor like SASS:

@each $i in (1, 2, 3, 4, 5) {
  .child:nth-of-type(#{$i}):hover ~ .child:nth-of-type(#{$i + 2}) {
    color: red;
  }
}

which would generate above CSS.

Answer 2

Sure we can

.child:nth-child(1):hover ~ .child:nth-child(4),
.child:nth-child(1):hover ~ .child:nth-child(5) {
  background-color: orange;
}

<div class="parent">
    <div class="child"> 1 </div>
    <div class="child"> 2 </div>
    <div class="child"> 3 </div>
    <div class="child"> 4 </div>
    <div class="child"> 5 </div>
</div>

Answer 3

.child {
  border: 1px solid;
  width: 3em;
  height: 3em;
  text-align: center;
  line-height: 3em;
}

.child:first-child:hover~.child:nth-child(4),
.child:first-child:hover~.child:nth-child(5) {
  background-color: red;
}

<div class="parent">
  <div class="child"> 1 </div>
  <div class="child"> 2 </div>
  <div class="child"> 3 </div>
  <div class="child"> 4 </div>
  <div class="child"> 5 </div>
</div>