CSS Selector
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class,
type, attribute etc.
There are several different types of selectors in CSS.
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Group Selector
- CSS Universal Selector
- CSS Descendant Selector
- CSS Child Selector
CSS Element Selector
The element selector selects the HTML element by name.
You can select all <p> elements on a page like this (in this case, all </p> elements will
be center-aligned, with a red text color):
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Element Selector </title>
<meta charset="UTF-8">
<style>
p {
color: gray;
text-align: center;
}
</style>
</head>
<body>
<p> This style will be applied on every paragraph.. </p>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
</body>
</html>
Output
CSS Element Selector Example
This style will be applied on every paragraph..
paragraph 1
paragraph 2
CSS Id Selector
- The id selector selects the id attribute of an HTML element to select a specific element.
- An id is always
unique within the page so it is chosen to select a single, unique element.
- To select an element with a specific id, write a hash (
#) character, followed by the id of the element.
- You can select all
<p> elements on a page like this (in this case, all </p> elements will
be center-aligned, with a red text color):
- The style rule below will be applied to the HTML element with
id="para1":
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Id Selector </title>
<meta charset="UTF-8">
<style>
#para1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<p id="para1"> Hello World! (This paragraph is affected by style). </p>
<p> This paragraph is not affected by the style. </p>
</body>
</html>
Output
CSS Id Selector
Hello World! (This paragraph is affected by style).
This paragraph is not affected by the style.
Note : An id cannot start with number.
CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character .
(full stop symbol) followed by the class name.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
.center {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading is orange and center-aligned. </h1>
<p class="center"> This paragraph is orange and center-aligned. </p>
</body>
</html>
Output
CSS Class Selector Examples
This heading is orange and center-aligned.
This paragraph is orange and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use the element name
with class selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
p.center {
color: seagreen;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading will not be affected. </h1>
<p class="center"> This paragraph will be seagreen and center-aligned. </p>
</body>
</html>
Output
CSS Class Selector
This heading will not be affected.
This paragraph will be seagreen and center-aligned.
CSS Grouping Selector
The grouping selector is used to select all the elements with the same style definitions.
It is used to minimize the code. Commas (,) are used to separate each selector in grouping.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Grouping Selector </title>
<meta charset="UTF-8">
<style>
h1 {
color: seagreen;
text-align: left;
}
h2 {
color: red;
text-align: center;
}
p {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<h1> This heading is seagreen and left-aligned. </h1>
<h2> This heading is red and center-aligned. </h2>
<p> This paragraph is blue and right-aligned. </p>
</body>
</html>
Output
CSS Grouping Selector
This heading is seagreen and left-aligned.
This heading is red and center-aligned.
This paragraph is blue and right-aligned.
CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Universal Selector </title>
<meta charset="UTF-8">
<style>
*{
color: green;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p>
</body>
</html>
Output
CSS Universal Selector
This is heading 1.
This is heading 2
This style will be applied on every paragraph.
CSS Descendant Selectors
They are used if you want to target only those anchors that are contained within an unordered list,
rather than targeting all anchor elements.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Descendant Selectors</title>
<style type="text/css">
h1 em {
color: green;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</body>
</html>
Output
CSS Descendant Selector
This is a heading
CSS Child Selectors
A child selector can be used to select only those elements that are the direct children of some element.
A child selector is made up of two or more selectors separated by the greater than symbol (i.e. >).
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Child Selector </title>
<meta charset="UTF-8">
<style type="text/css">
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li>
<a href="#">JavaScript</a>
<ol>
<li><a href="#">PHP</a></li>
<li><a href="#">Angular</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Output