To select the contents to style, the CSS selectors are used. Selectors in CSS are used to select an HTML element according to its id, class, type, attribute, etc.
Different types of CSS selectors are listed below:
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
CSS Element Selector:
To select the HTML element by name, the CSS element selector is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-align: center;
color: crimson;
}
</style>
</head>
<body>
<h3>Hello World!!</h3>
<h3>Today is a great day.</h3>
</body>
</html>
Explanation:
In the above example, we are using the CSS element selector to select the <h3> element and to apply CSS to it.
CSS ID Selector:
To select the id attribute of an HTML element the id selector is used. To select a specific element the id attribute is used. To select a single or unique element, the id is used because it is always unique within a page. An id selector contains the id of the element, preceded by the hash character (#).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#head {
text-align: center;
color: crimson;
}
</style>
</head>
<body>
<h3 id="head">Hello World!!</h3>
<h3>Today is a great day.</h3>
</body>
</html>
Explanation:
In the above example, we are using the CSS id selector to select the id attribute of an HTML element.
CSS Class Selector:
To select an HTML element with a specific class attribute, the CSS class selector is used. It consists of a class name preceded by a period character (full stop symbol). The starting character of a class name should not be a number.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.bdy {
text-align: center;
color: crimson;
}
</style>
</head>
<body>
<h1 class="bdy">Hello World!!</h1>
<p class="bdy">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS class selector to select an HTML element with a specific class attribute.
CSS Class Selector for a specific element:
The HTML element name is used with a CSS class selector, to specify that only one specific HTML element should be affected.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.bdy {
text-align: center;
color: crimson;
}
</style>
</head>
<body>
<h1 class="bdy">Hello World!!</h1>
<p class="bdy">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS class selector for a specific element to specify that only one specific HTML element should be affected.
CSS Universal Selector:
To select all the HTML elements on a page, the CSS universal selector is used as a wildcard character.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: crimson;
}
</style>
</head>
<body>
<h3 id="head">Hello World!!</h3>
<h3>Today is a great day.</h3>
</body>
</html>
Explanation:
In the above example, we are using the CSS universal selector to select all the HTML elements on a page.
CSS Group Selector:
To select all the HTML elements with the same style definitions, the CSS grouping selector is used to minimize the code. To separate the selectors in the grouping, the comma can be used.
Example: Defining CSS properties for all the elements.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h3 id="head">Hello World!!</h3>
<p>Today is a great day.</p>
</body>
</html>
Explanation:
In the above example, we are defining CSS properties for all the elements.
Example: CSS group selector.
<!DOCTYPE html>
<html>
<head>
<style>
h3,p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h3 id="head">Hello World!!</h3>
<p>Today is a great day.</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS group selector to select all the HTML elements with the same style definitions.