CSS Selectors

CSS Selectors

A CSS selector identifies the HTML element or elements that a CSS rule will style. Selectors allow you to apply styles to every element of a particular type or target specific elements using classes and IDs.

How CSS Selectors Work

A selector appears at the beginning of a CSS rule. It tells the browser which HTML elements should receive the declarations inside the rule.

p {
  color: blue;
}

In this example, p is the selector. It selects the <p> elements in the document and applies the color property to them.

Element Selector

An element selector uses the name of an HTML element and selects every matching element on the page.

h2 {
  color: green;
}

This rule selects every <h2> element in the document.

<h2>First Heading</h2>
<p>This is a paragraph.</p>
<h2>Second Heading</h2>

Both <h2> elements will receive the same CSS rule because they are selected by their element name.

Class Selector

A class selector targets HTML elements that have a particular class attribute. A class selector begins with a period (.) followed by the class name.

.highlight {
  background-color: yellow;
}

The class name is then added to an HTML element with the class attribute.

<p class="highlight">This paragraph is highlighted.</p>
<p>This paragraph is not highlighted.</p>

The same class can be used on multiple HTML elements, making classes useful when several elements need the same styling.

ID Selector

An ID selector targets an HTML element with a particular id attribute. An ID selector begins with a number sign (#) followed by the ID value.

#intro {
  font-weight: bold;
}

The matching ID is assigned to the HTML element:

<p id="intro">This is the introductory paragraph.</p>

An ID value should identify one unique element within a page. When the same styling needs to be applied to several elements, a class is usually more appropriate.

Grouping Selectors

When several selectors need the same declarations, they can be grouped together by separating the selectors with commas.

h1,
h2,
h3 {
  color: #333333;
}

This rule applies the same text color to all <h1>, <h2>, and <h3> elements. Grouping selectors avoids repeating the same declarations in separate CSS rules.

Choosing a Selector

Use an element selector when you want to style all elements of the same type. Use a class selector when the same style should be shared by selected elements, and use an ID selector when you need to identify a unique element.

CSS provides many additional selectors for targeting elements based on their relationships, attributes, states, and other conditions. For the HTML Tutorials, understanding element, class, ID, and grouped selectors provides the foundation needed to follow the CSS used in the examples.

Summary

CSS selectors tell the browser which HTML elements a CSS rule should style. Element selectors target elements by their tag name, class selectors begin with a period (.), and ID selectors begin with a number sign (#).

Multiple selectors can also be grouped with commas when they share the same declarations. Understanding these basic selectors makes it easier to see how CSS rules are connected to the HTML elements they style.