CSS Selectors

CSS Selectors

Learn how to target specific HTML elements for styling.

What are CSS Selectors?

CSS selectors are patterns used to select, or “find,” the HTML elements you want to style. They are the crucial first part of any CSS rule.

You can select elements based on their tag name, ID, class, attributes, relationship to other elements, and more.

The Element Selector (Type Selector)

The simplest selector targets elements based on their HTML tag name.

For example, to select all <p> (paragraph) elements on a page and make them red and centered:

/* Selects all paragraph elements */
p {
  color: red;
  text-align: center;
}

The ID Selector

The ID selector uses the id attribute of an HTML element to target one specific element.

An element’s id must be unique within the entire HTML document. This selector is ideal when you need to style a single, distinct element.

To select an element with a specific ID, prefix the ID name with a hash (#) character.

This rule targets the HTML element with id="intro-paragraph":

/* Selects the element with id="intro-paragraph" */
#intro-paragraph {
  font-size: 1.2em;
  color: navy;
}

Important Note: An ID name must not start with a number and should ideally not contain spaces (use hyphens or underscores instead). While modern browsers might be lenient, adhering to this rule ensures maximum compatibility.

The Class Selector

The class selector targets elements based on the value of their class attribute.

Unlike IDs, the same class can be applied to multiple elements, and a single element can have multiple classes (separated by spaces in the HTML attribute). This makes classes very versatile for applying reusable styles.

To select elements with a specific class, prefix the class name with a period (.) character.

This rule targets all HTML elements with class="highlight" and gives them a yellow background:

/* Selects all elements with class="highlight" */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

You can also make class selectors more specific by combining them with an element selector. This rule only targets <p> elements that also have class="highlight":

/* Selects only <p> elements with class="highlight" */
p.highlight {
  background-color: lightyellow;
  border: 1px dashed orange;
}

Important Note: Like ID names, class names should not start with a number. They are case-sensitive in HTML and CSS.

Grouping Selectors

If multiple elements share the exact same style declarations, you can group their selectors together to write more concise CSS.

Instead of writing:

h1 {
  text-align: center;
  color: blue;
}

h2 {
  text-align: center;
  color: blue;
}

.section-title {
  text-align: center;
  color: blue;
}

You can group the selectors by separating them with commas:

/* Selects h1, h2, and elements with class="section-title" */
h1, h2, .section-title {
  text-align: center;
  color: blue;
}

This makes your CSS shorter and easier to maintain, as you only need to change the style in one place.

These are the most fundamental selectors. CSS offers many more powerful selectors (like attribute selectors, pseudo-classes, and pseudo-elements) covered in other chapters.