CSS Selectors 
A CSS selector chooses the HTML elements you need to style. We can categories CSS selectors into five classifications.

·  

  1. Simple selectors (select elements based on name, id, class)
  2. Attribute selector
  3. Combinator Selector
  4. Pseudo-class selector
  5. Pseudo-elements selector
In this tutorial, we will see the details of the most basic selectors.
The CSS Universal Selector
The CSS universal selector(*) chooses all HTML elements.
Example:
<html>
<head>
<style>
* {
  text-align: center;
  color: tomato;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Univerrsal selector</p>
</body>
</html>
Output


The CSS ID Selector
The id selector attributes use the id characteristic of an HTML component to choose a particular component. The id of a component is unique inside a page, so the id selector is utilized to choose one novel component! To choose a component with a particular id, compose a hash (#) character, followed by the id of the component.
Example
The CSS rule below will be applied to the HTML component with id="pr1"
<!DOCTYPE html>
<html>
<head>
<style>
#pr1 {
  text-align: center;
  color: tomato;
}
</style>
</head>
<body>

<p id="pr1">This paragraph is affected by the style</p>

</body>
</html>
Output

This paragraph is affected by the style

The CSS Class Selector 
The class selector attributes use the class characteristic of an HTML component to choose a particular component. To choose a component with a particular class, write a dot (.) character, followed by the class of the component. 
Example: The CSS rule below will be applied to the HTML component with class="pr".
<!DOCTYPE html>
<html>
<head>
<style>
.pr{
  text-align: center;
  color: tomato;
}
</style>
</head>
<body>
<p class="pr">tomato color and center-aligned paragraph.</p> 
</body>
</html>
Output 

tomato color and center-aligned paragraph.

The CSS element Selector 
The element selector chooses HTML elements based on the element name.
Example: Every paragraph is affected.
<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: tomato;
} 
</style>
</head>
<body>
<p>Hello world</p>
<p>Element selector</p>
</body>
</html>
Output 

Hello world!;

Element selector

The CSS Grouping Selector
The CSS grouping selector chooses all the HTML component which has the same styles.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2, h3, p {
  text-align: center;
  color: tomato;
} 
</style>
</head>
<body>
<h2>Hello world<h2>
<h3>Hello world</h3>
<p>Helo World</p>
</body>
</html>
Output