In CSS, selectors are used to select or find the HTML elements of a web page that we wish to style. There are 5 different types of CSS selectors available: CSS Element Selector, CSS Id Selector, CSS Class Selector, CSS Universal Selector, CSS Group Selector. In this short blog post we’ll go through the different types in great detail and see how they work.
CSS Element Selector
The CSS Element Selector, selects all HTML elements based on the element name. Below, all <h1> elements will be left-aligned with a green text colour:
CSS Id Selector
The id selector finds the id attribute of an HTML element to style a specific element. The id is written with the hash character # and it is always unique within the page so it is chosen to select a single, unique element.
CSS Class Selector
The class selector is used to target all HTML elements with a specific class attribute. It is written with a period character . followed by the class name:
CSS Universal Selector
The CSS universal selector selects all the elements on the page. Below, the CSS rule will apply to every HTML element of the page:
CSS Group Selector
The grouping selector selects all the HTML elements with the same style definitions. In order to group selectors, we separate each selector with a comma:
