CSS selectors are essential for targeting specific elements within an HTML document for styling purposes. They are a key component of CSS rules that determine the appearance of web content. These selectors identify HTML elements based on criteria such as id, class, type, or attributes.
There are several different types of selectors in CSS.
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
1) CSS Element Selector
The selector chooses the HTML element based on its name.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This style will be applied on every paragraph.Me too!And me!
This style will be applied on every paragraph.
Me too!
And me!
2) CSS Id Selector
The id selector chooses the id attribute of an HTML element to target a particular element. Since an id is exclusive within the page, it is selected to pinpoint a singular, distinct element.
It is composed using the pound sign (#), then succeeded by the identifier of the element.
Let's take an example with the id "para1".
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello C# Tutorial</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output:
Hello example.comThis paragraph will not be affected.
Hello C# Tutorial
This paragraph will not be affected.
3) CSS Class Selector
The class selector targets HTML elements that have a particular class attribute. It is applied using a period character (.) followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
Example
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Output:
This heading is blue and center-aligned.This paragraph is blue and center-aligned.
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you need to indicate that only a particular HTML element should be impacted, you can employ the element name along with a class selector.
Let's see an example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Output:
This heading is not affectedThis paragraph is blue and center-aligned.
This heading is not affected
This paragraph is blue and center-aligned.
4) CSS Universal Selector
The universal selector serves as a wildcard character, enabling the selection of all elements present on a webpage.
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This is headingThis style will be applied on every paragraph.Me too!And me!
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
The grouping selector is employed to target all elements sharing identical style definitions.
The grouping selector is employed to reduce the amount of code, with commas serving to separate individual selectors within the grouping.
Let's see the CSS code without group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
As evident, it is essential to specify CSS attributes for each element. This can be categorized in the following manners:
h1,h2,p {
text-align: center;
color: blue;
}
Let's see the full example of CSS group selector.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello C# Tutorial</h1>
<h2>Hello C# Tutorial (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Hello example.comHello C# Tutorial (In smaller font)This is a paragraph.
Hello C# Tutorial
Hello C# Tutorial (In smaller font)
This is a paragraph.