CSS Selectors

 

A CSS selector selects the HTML element you want to style.

CSS selectors are used to "find" (or select) the HTML elements you want to style.

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;
}

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

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

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;
}

CSS Universal Selector

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

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

CSS Grouping Selector

• grouping selector selects all the HTML elements with 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.

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