CSS Selectors

By /

In this chapter, you will learn how CSS selects HTML elements to apply styles. CSS provides different types of selectors, and each one is used in a different way. Let’s understand the most common CSS selectors one by one.

What is a CSS Selector?

A CSS selector is used to select an HTML element that you want to style.

For example:

p {
  color: blue;
}

Here, p is the selector. It selects all <p> elements and changes their text color to blue.

1. Element Selector

An element selector selects HTML elements based on their tag name.

For example:

h1 {
  color: blue;
}

This CSS selects all <h1> elements.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Element Selector</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      color: green;
    }
  </style>
</head>

<body>

  <h1>Welcome to CSS</h1>

  <p>This paragraph is green.</p>
  <p>This paragraph is also green.</p>

</body>
</html>

Result

  • All <h1> elements will be blue.
  • All <p> elements will be green.

2. ID Selector

An ID selector selects one specific HTML element using its id attribute. In CSS, an ID selector starts with a hash (#) symbol.

Example

&lt;h1 id="heading">Learning CSS&lt;/h1>

#heading {
  color: red;
}

The id value in HTML and the selector in CSS should match.

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>ID Selector</title>

  <style>
    #heading {
      color: red;
    }
  </style>
</head>

<body>

  <h1 id="heading">Learning CSS</h1>

</body>
</html>

The heading will appear in red.

An id should be unique on a page. This means you should not use the same id for multiple elements.

3. Class Selector

A class selector selects HTML elements using their class attribute. In CSS, a class selector starts with a dot (.).

Example

<p class="text">Learning CSS is easy.</p>

.text {
  color: purple;
}

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Class Selector</title>

  <style>
    .text {
      color: purple;
    }
  </style>
</head>

<body>

  <p class="text">Learning CSS is easy.</p>

</body>
</html>

One class can also be used on multiple elements.

<h2 class="blue-text">Heading</h2>

<p class="blue-text">Paragraph</p>

.blue-text {
  color: blue;
}

Both elements will appear in blue.

4. Universal Selector

The universal selector selects all HTML elements on the page. It uses an asterisk (*).

Example

<!DOCTYPE html>
<html>
<head>
  <title>Universal Selector</title>

  <style>
    * {
      color: blue;
    }
  </style>
</head>

<body>

  <h1>CSS Selectors</h1>

  <p>This is a paragraph.</p>

  <h2>Learning CSS</h2>

</body>
</html>

The universal selector applies the color blue to all the elements on the page.

Quick Recap

  • A selector is used to select HTML elements.
  • An element selector selects elements by their tag name.
  • An ID selector uses #.
  • A class selector uses ..
  • A universal selector uses *.

Frequently Asked Questions (FAQs)

Q1. What is a CSS selector?

A CSS selector is used to select HTML elements that you want to style using CSS.

Q2. What are the common types of CSS selectors?

Some of the most common CSS selectors are the element selector, ID selector, class selector, and universal selector.

Q3. What is an element selector in CSS?

An element selector selects HTML elements based on their tag name. It is useful when you want to apply the same style to all elements of a specific type.

Q4. What is an ID selector in CSS?

An ID selector selects one specific HTML element using its unique ID attribute. In CSS, an ID selector starts with a hash symbol.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top