The Only CSS Selectors & Pseudo-Classes You Need

Out of all 90+ selectors, you only need to remember these 20

5 min readAug 31, 2020

Don’t memorize all CSS Selectors.

Instead, learn just the ones you’ll actually use.

When I was first learning CSS, I tried memorizing all selectors and it was a huge waste of time. I don’t want you to make the same mistake, so I compiled a cheat sheet of the CSS selectors & pseudo-classes you’ll actually use.

Element type selector

element — Selects all elements of a given node type.

Class selector

.classname — Selects all elements with a specific class.

ID selector

#someid — Selects an element with a specific id.

Universal selector

* — Selects all elements. Its power comes from combining it with other selectors.

Attribute selector

Selects elements based on the presence or value of some attribute.

This selector has quite a few variants, here are the most common ones:

[attr] Has an attr attribute
[attr=value] Has an attr attribute, whose value is exactly value
[attr*=value] Has an attr attribute, whose value contains value
[attr^=value] Has an attr attribute, whose value starts with value
[attr$=value] Has an attr attribute, whose value ends with value

Adding the letter i (for insensitive) to any of the above selectors (after the value but before the closing bracket ) will make the value comparison case-insensitive.

This means that the characters in the string can be both uppercase or lowercase. For example [href$=".ZIP"i] will match any element with the href attribute ending with .zip, .ZIP, .Zip, .zIP etc.

Note: The case-insensitive modifier is not supported in Internet Explorer

Descendant combinator

A B — Selects elements matching B that are descendants of A

Child combinator

A > B — Selects elements matching B that are direct children of A

Adjacent sibling combinator

A + B — Selects elements matching B that directly follow A. Both elements have to share the same parent.

General sibling combinator

A ~ B — Selects elements matching B that follow A (but not necessarily immediately). Both elements have to share the same parent.

:hover

Selects an element, when the user’s mouse is above it.

It is useful for enhancing the desktop user experience. But, its behavior on touchscreens is unreliable. Depending on the browser, it might trigger for a moment after touching the element, or stay active until the user touches another element.

For this reason, you should never use it to reveal critical information or functionality, without a proper touchscreen-friendly fallback.

:focus

Selects an element when the user clicks or taps on it, or selects it with the keyboard, by using the Tab key.

Important: Never use it to remove the default outline, without replacing it with a custom focus indicator. Doing so would make your website inaccessible to those with reduced vision and anyone else using a keyboard to navigate your site.

This pseudo-class only applies styles to the focused element itself. To apply the styles to any element that contains a focused element, use the :focus-within pseudo-class instead.

Note: :focus-within is not supported in Internet Explorer

:not()

:not(X) — Selects elements that don’t match X

It can be combined with other selectors, including other pseudo-classes (but not pseudo-elements) to exlude certain elements, or states from receiving the styles.

Examples:

p:not(.red) — Selects all <p> elements that don’t have the red class

div :not(ul) — Selects all descendants of <div> elements that aren’t <ul> elements

button:not(:focus) — Selects all <button> elements that aren’t focused

:any-link

Selects anchor tags <a> with an href attribute, whether it has been visited or not.

To only match links that haven’t been visited yet, use :link
To only match links that have been visited before, use :visited

Note: :any-link is not supported in Internet Explorer, if you need to support it use :link & :visited instead.

:disabled

Selects disabled elements.

It’s most commonly used with buttons, inputs and other form elements that have the disabled attribute.

:nth-child() & :nth-last-child()

Selects elements based on their position in a group.

The :nth-child() selector selects elements from the beginning, and :nth-last-child() does the same but starting from the end.

Examples:

:nth-child(3) Selects the third element.

:nth-child(4n) Selects every fourth element: 4, 8, 12, 16 etc.

:nth-child(odd) Selects the odd elements: 1, 3, 5 etc.

:nth-child(even) Selects the even elements: 2, 4, 6 etc.

There are also a few convenience pseudo-classes, that offer a more readable alternative for common use cases:

:first-child
:last-child
:only-child

:nth-of-type() & :nth-last-of-type()

These pseudo-classes work like :nth-child() & :nth-last-child() but only count elements of a given type.

So, for example p:nth-of-type(odd) will select every odd <p> paragraph:

Like with :nth-child() & :nth-last-child(), there are also some convenience pseudo-classes:

:first-of-type
:last-of-type
:only-of-type

:invalid & :valid

:invalid selects <inputs> or other form elements whose content doesn’t match its validation rules.

For example a <input type=”number” min="5"> whose value is 4.

Or, a <input type="text" required> that is empty.

:valid selects form elements whose content matches its validation rules.

For example a <input type=”number” min="5"> whose value is 7.

:required & :optional

:required selects <inputs> or other form elements which have the required attribute.

:optional selects form elements that don’t have the required attribute.

:root

It selects the root element of the document. It’s almost identical to the html selector, but has higher specificity.

It’s a great place to set global CSS variables.

::before / ::after

When added to another selector, they can add additional content before or after an element, using the content property.

::placeholder

Used to apply styles to the placeholder text in <input> elements.

Thanks for reading. I hope you found this list helpful. If you have any questions, leave them in the comments.