CSS Selectors

CSS selectors are patterns used to target HTML elements so you can apply styles to them. They help you control the appearance of headings, paragraphs, buttons, images, navigation menus, and other elements on a webpage.

For example, you can use a selector to make all headings blue or change the background color of a specific button. Understanding CSS selectors is essential for building well-designed and maintainable websites.

What Are CSS Selectors?

A CSS selector identifies which HTML elements should receive a particular styling rule.

The basic syntax is:

selector {
  property: value;
}

For example:

p {
  color: blue;
}

Here, p is the selector, and the rule makes the text of all matching paragraph elements blue.

Learn more about writing styling rules in our CSS Syntax tutorial.

Types of CSS Selectors

CSS provides several types of selectors for targeting elements in different ways.

Element Selector

An element selector targets all HTML elements with a particular tag name.

h1 {
  color: navy;
}

p {
  font-size: 18px;
}

The first rule styles all level-one headings, while the second changes the font size of all paragraphs.

Class Selector

A class selector targets elements that have a specified class attribute. It begins with a dot (.).

HTML:

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

CSS:

.highlight {
  background-color: yellow;
  color: black;
}

Only the paragraph with the highlight class receives these styles. A class can also be reused on multiple elements.

Explore our HTML Class Attribute tutorial to understand how classes work in HTML.

ID Selector

An ID selector targets an element with a specific id attribute. It begins with a hash symbol (#).

HTML:

<h1 id="main-title">Welcome to Web4Learners</h1>

CSS:

#main-title {
  color: green;
  text-align: center;
}

IDs should be unique within an HTML document.

Universal Selector

The universal selector (*) targets all elements.

* {
  box-sizing: border-box;
}

This example sets box-sizing to border-box for all elements, making element sizing easier to manage.

Grouping Selector

A grouping selector applies the same styles to multiple selectors by separating them with commas.

h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}

This rule applies the specified font and color to all matching headings and paragraphs.

Combining CSS Selectors

You can combine selectors to target elements based on their relationships.

For example, a descendant selector targets paragraphs located anywhere inside an element with the content class.

.content p {
  color: darkblue;
}

A child selector targets only direct children:

.content > p {
  font-weight: bold;
}

These selectors are useful when different sections of a webpage require different styles.

CSS Selectors Example

The following example combines element, class, and ID selectors.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selectors Example</title>
  <style>
    p {
      color: #333;
    }

    .highlight {
      color: red;
    }

    #main-title {
      color: blue;
    }
  </style>
</head>
<body>

  <h1 id="main-title">CSS Selectors</h1>
  <p>This paragraph uses the element selector.</p>
  <p class="highlight">This paragraph uses the class selector.</p>

</body>
</html>

The heading becomes blue, the first paragraph uses dark text, and the highlighted paragraph becomes red.

Why Are CSS Selectors Important?

CSS selectors help developers:

• Apply styles to specific elements.
• Reuse styles across multiple pages.
• Avoid unnecessary repeated CSS.
• Create consistent website designs.
• Target elements based on their attributes and relationships.
• Maintain and update styles more efficiently.

As you progress, you will learn attribute selectors, sibling selectors, pseudo-classes, and pseudo-elements for more advanced styling.

Continue with our CSS Comments tutorial to learn how to document your stylesheets clearly.