DEV Community

loading...

CSS-Selectors Guide

ronakjethwa profile image Ronak Jethwa ・3 min read

CSS Selectors

I put together a guide for some super important and yet confusing CSS-Selectors. The list should help you clear the confusion between many of them, or simply use this guide as a 5-minutes review book to prep yourself before that interview.


Descendant Selector

A B 
/* selects any B elements that are inside of the element A */
Enter fullscreen mode Exit fullscreen mode

Comma Combinator

A, B
/* selects all A and B elements */
Enter fullscreen mode Exit fullscreen mode

Universal Selector

*
/* selects all elements */
Enter fullscreen mode Exit fullscreen mode

Adjacent Sibling Selector

A + B
/* This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. */
/* div + a selects every a element that directly follows a div */
Enter fullscreen mode Exit fullscreen mode

General Sibling Selector

A ~ B
/* You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one. */
/* A ~ B selects all B that follow a A */
Enter fullscreen mode Exit fullscreen mode

General vs Adjacent Sibling Selector: With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled.

Child Selector

A > B
/* A > B selects all B that are a direct children A */
Enter fullscreen mode Exit fullscreen mode

First Child Pseudo-selector

:first-child
/* p:first-child selects all first child p elements. */
Enter fullscreen mode Exit fullscreen mode

Only Child Pseudo-selector

:only-child
/* span:only-child selects the span elements that are the only child of some other element. */
Enter fullscreen mode Exit fullscreen mode

Last Child Pseudo-selector

:last-child
/* span:last-child selects all last-child span elements. */
Enter fullscreen mode Exit fullscreen mode

Nth Child Pseudo-selector

:nth-child(A)
/* :nth-child(8) selects every element that is the 8th child of another element. */

:nth-child(odd)
/* :nth-child(odd) selects every odd element */

:nth-child(even)
/* :nth-child(even) selects every even element */
Enter fullscreen mode Exit fullscreen mode

Nth Last Child Selector

/* Selects the children from the bottom of the parent. This is like nth-child, but counting from the back! */
:nth-last-child(A)
/* :nth-last-child(2) selects all second-to-last child elements. */
Enter fullscreen mode Exit fullscreen mode

First of Type Selector

:first-of-type
/* span:first-of-type selects the first span in any element. */
Enter fullscreen mode Exit fullscreen mode

Nth of Type Selector

/* Selects a specific element based on its type and order in another element - or even or odd instances of that element. */
:nth-of-type(A)
/* div:nth-of-type(2) selects the second instance of a div. */
Enter fullscreen mode Exit fullscreen mode

Nth-of-type Selector with Formula

/* The nth-of-type formula selects every nth element, starting the count at a specific instance of that element. */
:nth-of-type(An+B)
/* span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance. */
Enter fullscreen mode Exit fullscreen mode

Only of Type Selector

/* Selects the only element of its type within another element. */
:only-of-type
/* p span:only-of-type selects a span within any p if it is the only span in there. */
Enter fullscreen mode Exit fullscreen mode

Last of Type Selector

/* Select the last element of a specific type */
:last-of-type
/* div:last-of-type selects the last div in every element. */
Enter fullscreen mode Exit fullscreen mode

Empty Selector

/* Select elements that don't have children */
:empty
Enter fullscreen mode Exit fullscreen mode

Negation Pseudo-class

/* Select all elements that don't match the negation selector */
:not(X)
/* :not(.someClass) selects all elements that do not have class="someClass" */
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
jspiderhand profile image
Justin Stout

Good article!
I had to chuckle a little when I saw this because I did my Technical Documentation project for FreeCodeCamp on CSS selectors. I did a brief overview of more commonly used ones. You see it hear

{ codepen.io/jspiderhand/full/LYGVwNB }

Collapse
ronakjethwa profile image
Ronak Jethwa Author

Good one! A need for robust all-inclusive guide was mainly my inspiration in coming up with this document. I, even at this date, sometimes struggle with many of these!

Collapse
jspiderhand profile image
Justin Stout

I struggle with them too. There’s a lot to take in and that’s why I put some links at the bottom of my project page. Glad you liked it