Basic CSS Selectors

CSS selectors identify the HTML elements that a CSS rule will style. Basic selectors can target elements by their element name, class, ID, or use the universal selector to match elements more broadly.

Understanding selectors is an important part of learning CSS because every CSS rule needs a way to identify which elements its declarations should apply to.

Type Selector

A type selector, also called an element selector, selects HTML elements by their element name. The selector is written using the element name without angle brackets.

p {
  color: blue;
}

This rule selects every <p> element and changes its text color to blue.

Type selectors are useful when the same style should apply to all elements of a particular type.

Class Selector

A class selector selects elements that have a matching class attribute value. A class selector begins with a period (.) followed by the class name.

.highlight {
  background-color: #ffffcc;
}

The class is assigned to an HTML element using the class attribute.

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

The same class can be assigned to multiple elements, making class selectors useful for creating reusable styles.

ID Selector

An ID selector selects an element whose id attribute matches the selector. An ID selector begins with a number sign (#) followed by the ID value.

#introduction {
  font-weight: bold;
}

The corresponding HTML element uses the same value in its id attribute.

<p id="introduction">Introduction to CSS selectors.</p>

An ID value must be unique within an HTML document, so an ID selector normally identifies one specific element on the page.

Universal Selector

The universal selector is represented by an asterisk (*) and selects elements without requiring a particular element name, class, or ID.

* {
  box-sizing: border-box;
}

In this example, box-sizing: border-box; applies to every element in the document.

The universal selector is often useful for applying baseline styles that should affect many or all elements.

Grouping Selectors

When multiple selectors use the same CSS declarations, the selectors can be grouped into a selector list by separating them with commas.

h1, h2, h3 {
  font-family: Arial, Helvetica, sans-serif;
}

This rule applies the same font-family declaration to all <h1>, <h2>, and <h3> elements.

Grouping selectors can reduce repeated CSS and make related styles easier to maintain.

Basic Selectors Example

The following example uses type, class, and ID selectors to style different HTML elements.

<style>
h1 {
  color: blue;
}
.highlight {
  background-color: #ffffcc;
}
#introduction {
  font-weight: bold;
}
</style>

<h1>CSS Selectors</h1>
<p id="introduction">Selectors determine which HTML elements are styled.</p>
<p class="highlight">Classes can be reused on multiple elements.</p>
<p>This paragraph receives only the styles that match it.</p>

Play in Editor

The type selector styles the heading, the ID selector targets the introduction paragraph, and the class selector highlights the paragraph containing the highlight class.