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):
<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
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
uniquewithin 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":
<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
Hello World! (This paragraph is affected by style).
This paragraph is not affected by the style.
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.
<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
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.
<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
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.
<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
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.
<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
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.
<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
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. >).
<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
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »