CSS: style nth sibling [duplicate]

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

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 

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

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 

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.