1. Home
  2. Css
  3. CSS Selectors

 CSS Selectors CSS

CSS Selectors  


CSS Selectors

The CSS element Selector

The element selector selects HTML elements based on the element name.

Here, all <p> elements on the page will be center-aligned, with a red text color:

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

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
  text-align: center;
  color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

In this example all HTML elements with class="center" will be red and center-aligned:

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

You can also specify that only specific HTML elements should be affected by a class.

p.center {
  text-align: center;
  color: red;
}

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS rule below will affect every HTML element on the page:

* {
  text-align: center;
  color: blue;
}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

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

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

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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

 

In this example we have grouped the selectors from the code above:

h1, h2, p {
  text-align: center;
  color: red;
}

Download free E-book of CSS

#askProgrammers
Learn Programming for Free

Join Programmers Community on Telegram

Talk with Experienced Programmers

Just drop a message, we will solve your queries