CSS Selectors - Simple selectors

 CSS Selectors

Simple selectors (select elements based on name, id, 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)

The CSS element Selector

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

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.

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

#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.

.center {

  text-align: center;

  color: red;

}

In this example only <p> elements with class="center" will be red and center-aligned: 

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.

* {

  text-align: center;

  color: blue;

}

The CSS Grouping Selector

h1, h2, p {

  text-align: center;

  color: red;

}