DEV Community

loading...
Cover image for CSS Selectors 'nth-of-type' and '~'

CSS Selectors 'nth-of-type' and '~'

ch
I feel so much confident about my creativity and expertise. I am a fast learner and best applier with teammates! Welcome for any skill test and trial until getting approved.
・1 min read

Description

p:nth-of-type(2)
/* Selects every <p> element that is the second <p> element of its parent */

p ~ ul
/* Selects every <ul> element that are preceded by a <p> element */
Enter fullscreen mode Exit fullscreen mode

I often use those 2 selectors in CSS stylesheet.
But I did not know about this correctly.
So I would like to share about my fault here with all of us.

div:nth-of-type(2n){
  background-color: red;
}
.c ~ .c {
  background-color:blue;
}
.d ~ .c {
  background-color:green;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Discussion (0)