Guide to CSS Selectors

The universal selector is marked with an asterisk (*) and serves as the basis for other selectors. It selects all elements regardless of their type. For example, creating a rule for the selector that adds a red background to an element will add red background to every single element of the page:

* {

background-color: red;

}

The universal selector is often used in combinations with other selectors, allowing us to select all elements inside another element.

Element type selectors target elements by their specific type. To use this selector, type the element's name without any extra CSS syntax. For example, to apply a style with black text aligned to the left to all <h1> headings of the page:

h1 {

text-align: left;

color: black;

}

This style will only apply to <h1> elements and won't affect other headings and body text.

Class selectors find elements with the specific class set by the HTML class attribute. A class selector is preceded by a full stop (.). For example, the selector for all elements of the class center would look like this: .center.

The class selector is the most commonly used selector type because of its flexibility — you can add the same class to different elements or multiple classes to one element.

Combining element type selectors with class selectors allows you to target elements of a specific type with a certain class. For example, to select all <h1> headings with the class center, use the selector h1.center.

The id selector uses the id attribute of an element to find a specific element on the page — as you probably remember from our HTML course, ids can't repeat on the same page. To select the element by its id, use a hash (#) before the id's value — for example, #header.

You might want to add element tags just to let yourself visually know in your CSS what you are targeting. For example, if id="header" is applied to the container <div>, you can use div#header as a selector.

Combinator selectors explain the relationship between the element you want to target and one of the other elements — whether the target's children, parents, ancestors, descendants, or siblings.

The descendant selector symbol is a space ( ) — for example, div h1. This selector targets all <h1> elements nested inside all <div> elements. The other combinators are the child selector (>), the adjacent sibling selector (+), and the general sibling selector (~).^[1]

Pseudo-classes allow you to target elements that you wouldn't be able to target otherwise. A pseudo-class follows a selector it specifies with a colon (:) between them. Most selectors of this type can be loosely divided into 2 groups:

• Dynamic pseudo-class selectors, like a:hover: They allow us to target elements that users are interacting with. For example, the :hover selector allows you to change the style of links users hover over.
• Structural pseudo-class selectors like p:first-child:This type of selector allows us to indicate elements with higher accuracy. For example, :first-child and :last-child allows you to target the first or last element among a group of sibling elements, respectively.^[2]

The CSS pseudo-elements allow you to style the elements or parts of the elements without adding any ids or classes.

If you want to style the first letter of every paragraph differently to make it look like a storybook — there's a selector that allows you to do just that! The selector p::first-letter will apply the chosen style to all of the first letters of all paragraphs. Other popular pseudo-elements are ::before and ::after to add cosmetic content before or after the element.

To learn more about pseudo-elements, check their comprehensive list on MDN Web Docs.^[3]

Attribute selectors aren't common, but they have some powerful use cases. They allow you to target elements that have a particular attribute or attribute value.

Attribute selectors are enclosed in square brackets ([...]). For example, to style all elements with a title attribute, we'd use the selector [title]. We can also target elements with specific titles. In that case, the code would look like [title="Important"].

An element type selector matches elements of the corresponding type — for example, the <p>, <span>, and <div> tags. It's generally considered poor practice to apply fine detail changes with a type selector alone. Elements like <div> are quite generic, and they hold all kinds of content that you usually want to style differently.

A common use case for element type selectors is the body text, as there can only be one <body> tag on any given page. You can use it to set the defaults for the whole page. For example:

body {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

Class selectors are what you'll end up using most of the time when creating style sheets. Class selectors are introduced with a full stop (.). This selector applies styling to all elements with a specified class attribute. It's a great way to customize how CSS rules apply by creating attributes that can be applied to any element to give it a certain styling.

The id selector lets you apply styling to an element with a specified id. It uses a hash (#) followed by the element's id.

While it might be easy to target elements by giving them ids, a style sheet like that can become a nightmare to maintain as it grows bigger. That's why this type of selector is used less often than class selectors.