It is a pattern to match the elements in an HTML document. The associated style rules is applied to the elements that match the selector pattern.
There are several different types of selectors in CSS.
The universal selector is used as a wildcard character. It selects all the elements on the pages.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Universal Selector</title>
<style>
* {
color:#11a286;
font-size:18px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<p>This is a another paragraph</p>
</body>
</html>
An element type selector matches every instance of the element in the document tree with the corresponding element type name.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Element Selector</title>
<style>
p {
color:#11a286;
font-size:18px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This style will be applied on every paragraph.</p>
<p class="ele">This is a paragraph.</p>
<p>This is a another paragraph</p>
</body>
</html>
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a hash sign (#) immediately followed by the id value.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Id Selector</title>
<style>
#paragraph {
color:#11a286;
font-size:18px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p id="paragraph">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
The class selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule.
The class selector is defined with a period sign (.) immediately followed by the class value.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Class Selector</title>
<style>
.paragraph {
color:#11a286;
font-size:18px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p class="paragraph">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
The grouping selector is used to select all the elements with the same style definitions.Commas are used to separate each selector in grouping.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Group Selector</title>
<style>
h1,h2,p {
color:#11a286;
font-size:18px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<h1>This is a another heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>