CSS Targeting Specific Child

This post is more to remind myself of all the tricks you can do with “nth-child” than anything else.

The most simple use of it is to target a specific child class:

:nth-child(1)

Then there is the possibility of targeting the nth child of every class within something:

>:nth-child(2)

Or narrow it down to images found within only the 2nd child of any class of a specific type (in this example “p” class) within something.

>p:nth-child(2)>img

Here’s what I was fiddling with when I decided to make this post:

#jetpack_display_posts_widget-3 .jetpack-display-remote-posts>p:nth-child(8)>img