DEV Community

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

Posted on

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

#html #css #javascript

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

Top comments (0)