CSS Selectors Every Web Developer Must Know in 2023

Save time searching for the important CSS selectors.

A comprehensive guide can help web developers avoid common mistakes and adopt a consistent, efficient approach to using CSS selectors.

This guide is a one-stop for all of the most useful and popular CSS selectors for developers to reference.

What are selectors in CSS?

CSS Selectors are used to target specific elements on the web page. In addition, selectors are the key to the whole process of styling and altering the web page and its elements.

There are several types of css selectors and you are going to learn almost all of them.

Class Selector

CSS class selector plays a very important role when we talk about layout or structure. So you can say it's a must-have selector in your code.

Key points: 

• The symbol period or dot (.) is used to select a class in css.
• The class can be used to select multiple elements at a time. 
• Class is reusable

Example:

Change the background color of all the elements with the class name "modal".

ID CSS Selector

ID selectors are used to target an element on the page that is unique. It stands for "Identifier".

Key points: 

• The symbol hash (#) is used to select an id in class
• It should be unique for a page or document.
• IDs are not reusable. You should never prefer to use more than one on a page.

Example: 

Change the background color of the home page.

Universal CSS Selector

Universal selector (*) is a CSS selector that matches every element.

Key Points:

• The Symbol Asterix (*) is used to select all elements.
• Developers mainly use it to reset the browser default padding, margins, and few behaviors
• You should always use it.

Example:

Reset all the browser default padding and margin to zero.

Grouping CSS Selector

Consider it an optimization selector. You can group multiple selectors and apply common styles to them. Pretty useful. 

Key Points:

• The Symbol comma (,) is used to select multiple elements at a time.
• Developers mainly use it to optimize the code
• It reduces the time of writing same code for multiple times for similar elements

Example:

There are four button variations. But we only need to apply border-radius to .btn-primary and .btn-secondary

Instead of doing this:

.btn-primary{ }

.btn-secondary{}

Use grouping CSS selector:

Element CSS Selector

The element or type selector allows us to choose any HTML element with its name on the page and start styling it with CSS rules.

key Points:

• You can select any element with the name
• It's pretty straightforward
• Developers mainly use it to add default styles for the elements

Example:

Add font-family, font-size to the body element

Descendant Selector

The descendant combinator selector includes all elements that are children of the current element. In CSS, this means it affects any child node.

Key Points:

• There is no symbol, just a gap is used between parent and children
• It's a very common css selector

Example:

Select all the paragraph elements inside a container and add red color to them.

Direct Child CSS Selector

Child combinator CSS Selector selects all the specified direct children of the parent.

Key Points:

• Greater symbol (>) is used to select the direct children.
• It is a very rare but necessary css selector.

Example:

Add background-color to only those button elements which are direct children of .container

Adjacent Sibling Selector

The adjacent sibling selector selects all of the siblings that are next to each other on the same line.

Key Points:

• It contains '+' sign.
• Developers use it for many use cases
• First come first serve, it selects the first element that comes after the sibling.

Example:

Add display: none; to property to all the direct (first) span elements which are next to div elements

General sibling selector

All elements that are next siblings of the specified element are selected by the general sibling selector.

Key Points:

• It contains '~' sign.
• It selects all the specified next siblings of element

Example:

Add color:black; to all the specified next siblings(p) of element (div).

div ~ p {

color: black;

}

Attribute Selector

It selects the elements based on given attributes.

Key Points:

• You can use square brackets [ ] to select the attributes
• It's a powerful CSS selector, developers use it by applying conditions
• There are several conditions, which you can use smartly with attribute selector(=, ~=, ^=, $=, *=, attribute|="value")

Syntax with examples:

You can utilize an attribute selector based on several different conditions and those conditions with examples are given below.

Equal [attribute="value"]

Add red color to all the anchor elements where href is equal to hash "#"

Contain [attribute ~= "value"] Restricted

Add border-radius to all the img elements where alt tag contains a word "circle"

Quick Note: A value needs to be a whole word.

Contain [attribute *= "value"] Flexible

Add 500px of width to all the img elements where the alt tag contains a word "opt"

Quick Note: A value doesn't need to be a whole word

If there are 3 images with alt tags (optimize-img, optimizeimg, optimize-img). It will select all three images. Because each one contains opt.

Start with [attribute|="value"] Restricted

Add the 500px width to all the img elements where alt tag begins with "optimize" value

Quick Note: A value needs to be a whole word

if there are 3 images with alt tags (optimize-img, optimizeimg, optimize-img). It will only select the first and third images. Because the second one is not a complete word.

Start with [attribute^="value"] Flexible

Add the border-radius to all the img elements where alt tag begins with "radius" value

Quick Note: A value doesn't need to be a whole word

If there are 3 images with alt tags (radius-circle, radiuscircle, radius-circle). It will select all three images. Because all of them begin with radius.

Ends With [attribute$="value"]

Add the red color to all the paragraphs where class attribute value ends with alert.

Quick Note: The value does not have to be a whole word!  

And Yeah! That's all for attribute css selectors.

First Child Selector

As the name suggests, it selects the first child from the list of children.

Key Points:

• :first-child is a pseudo-class
• Developers use it for many cases especially (adding the spacing at the top of list)

Example:

Add margin-top at the first item of the categories list.

Last Child Selector

As the name suggests, it selects the last child from the list of children.

Key Points:

• :last-child is a pseudo class
• Developers use it for many cases especially (adding the spacing at the end of list)

Example:

Add border-bottom at the end of the categories list (item).

First Letter Selector

It selects the first letter of the paragraph.

Key Points:

• ::first-letter is a pseudo-element
• It is pretty useful in making the first letter capital or big (like you see in the newspaper)

Example:

Increase the font size of the first letter of every paragraph.

First Line Selector

Similar to the first letter, you can even select the first line of a paragraph.

Example:

Increase font weight of first line of every paragraph.

:nth-child(value) CSS Selector

Similar to the :first-child and :last-child, it selects the element based on the given value.

Key Points:

• :nth-child is a pseudo class
• On a basic level, it accepts the integer value

Example:

Add background-color to the 5th children of 11 boxes.

Conclusion

It is essential to know about CSS selectors so that you can use them correctly in your projects.

In this tutorial, you learned about the most important CSS selectors, which you will see from time to time. You can always use it as a one-stop CSS Selectors cheat sheet.

Extremely Powerful CSS Selector

Before you go, there is an extremely powerful conditional-based CSS selector which I didn't mention.

Don't worry, I have also got it covered in a stand-alone guide. Go ahead and look into :not css selector

Make sure to share this guide with others & subscribe to our newsletter for more quick web development tutorials.