CSS Selectors

❮ Previous Next ❯

A CSS selector picks the HTML element(s) that you want to give a style to.

CSS Selectors

CSS selectors help you choose which parts of your HTML code you want to give a specific style to.

We can split CSS selectors into five groups:

Choosing things (picking stuff) by their name, ID, or class.
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

This page teaches about the simplest CSS selectors.

The CSS element Selector

The element selector picks out HTML elements by their name.

The CSS id Selector

The ID selector picks out a particular part of an HTML thing by using its ID label.

An element's ID is like its special name on a page – no other element has the same name. We use the ID name to pick just that one special element!

To pick a certain item using its special ID, type a symbol (#), then put the ID of the item right after it.

The CSS class Selector

The class selector picks out HTML elements that have a certain class attribute.

To pick things with a certain class, use a dot (.) and then the name of the class.

You can also say that only certain things on a webpage should be changed using a class.

The CSS Universal Selector

The star symbol (*) chooses everything in a webpage made with HTML.

The CSS Grouping Selector

The grouping selector picks out all the HTML elements that have the same style rules.

Take a look at this CSS code (the code makes the h1, h2, and p elements look the same):

It's a good idea to put similar things together (selectors) in order to make the code smaller.

To put selectors into groups, just use a comma to separate each selector.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Every paragraph will be affected by the style.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #para1 {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="para1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="center">Red and center-aligned heading</h1>
    <p class="center">Red and center-aligned paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.center {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="center">This heading will not be affected</h1>
    <p class="center">This paragraph will be red and center-aligned.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        text-align: center;
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>Every element on the page will be affected by the style.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
  text-align: center;
  color: red;
}

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

p {
  text-align: center;
  color: red;
}
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
   <h2>Hello world! in H2</h2>
    <p>Every element on the page will be affected by the style.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      h2,
      p {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <h2>Smaller heading!</h2>
    <p>This is a paragraph.</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Selectors

CSS Selectors

The CSS element Selector

The CSS id Selector

The CSS class Selector

The CSS Universal Selector

The CSS Grouping Selector

Web Development