Hello Everyone, here we are going to learn different types of CSS selectors. So, let's begin.
First of all, What are selectors in CSS? Selectors help us to select HTML elements that we would like to give styles to a particular element.
Now, let's see what are different types of selectors in CSS are.
1. Universal Selector:
The first type is a universal selector as the name suggests, it helps to select all the HTML elements. To be more precise, it is useful when we are targeting multiple elements in which we want to add the same styles there universal selector comes into the picture. Let's understand by a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Universal Selector</title>
<style>
* {
background-color: #707070;
color: #73fca7;
}
*.text-black {
color: #000000;
}
</style>
</head>
<body>
<h3>This is heading three</h3>
<p>This is paragraph</p>
<p>
<span class="text-black">
We can also use univeral selector to change text color
</span>
just like this.
</p>
</body>
</html>
Output:
2. Individual Selector:
With the help of an Individual Selector, we can easily select a single element, to which we want to add styles, in our HTML code. Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Individual Selector</title>
<style>
h2 {
color: darkcyan;
}
p {
color: rgb(248, 127, 127);
}
</style>
</head>
<body>
<h2>Individual Selector Heading</h2>
<p>Individual Selector Paragraph</p>
</body>
</html>
Output:
3. Class and Id Selector:
In this class and id selector, we can select an HTML element with a given class or id. To select elements with the class we use .(dot)class-name, which helps us to select all the elements which are given the same class name. Moreover, to select an element with an id, it must be the exact given value in the selector and for that, we use #(hash)class-name. Now, let's take an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.text-warning {
color: #ef9329;
font-size: large;
}
#text-danger {
color: #e92916;
font-size: larger;
}
</style>
</head>
<body>
<h3>Class and Id Selector</h3>
<ul>
<li class="text-warning">Selected by Class</li>
<li id="text-danger">Selected by Id</li>
</ul>
</body>
</html>
Output:
4.and(Chained) Selector:
By using Chained Selector we can select multiple ids and classes but, the sequence should be maintained as we write in HTML. Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
li.bg-black.text-white {
color: rgb(252, 164, 164);
background-color: #000;
font-size: larger;
}
</style>
</head>
<body>
<div>
<ul>
<li class="bg-black text-white">highlight me</li>
<li>highlight me</li>
<li class="bg-black text-white">highlight me</li>
<li>highlight me</li>
</ul>
</div>
</body>
</html>
Output:
5. Combined Selector:
With the help of a Combined Selector, we can select multiple different HTML elements. Like, we have p, h3, and li elements but, if we want to give the same styling to all elements we can use the combined selector. Let's see an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combined Selector</title>
<style>
h3,
li,
p {
color: #4a89ff;
font: larger;
}
</style>
</head>
<body>
<section>
<h3>Combined Selector</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed,
voluptatem.
</p>
</section>
</body>
</html>
Output:
6. Inside an element Selector:
In this type of selector, we can select a child element. Suppose, we have a div element, inside that div, there is ul and li element and we want to style all li elements, there we can use the inside element selector. Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inside an Element Selctor</title>
<style>
div ul li {
color: blue;
}
</style>
</head>
<body>
<div>
<p>lorem</p>
<ol>
<li>awesome</li>
<li>awesome</li>
</ol>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
</div>
</body>
</html>
Output:
7. Direct child Selector:
In this selector, if there is a scenario in which we have multiple li and we just want to target only one li there we can use a direct child selector. Let's understand more by example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Direct Child Selector</title>
<style>
div > li {
color: brown;
}
</style>
</head>
<body>
<div>
<p>lorem</p>
<li>awesome</li>
<li>awesome</li>
<ul>
<li>highlight me <a href="#">test</a></li>
<li>highlight me</li>
</ul>
</div>
</body>
</html>
Output:
8. Pseudo Selector:
In CSS, there is a before and after pseudo selector. before creates a pseudo-element that is the first child of the selected element.after creates a pseudo-element that is the last child of the select element. Let's understand by example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Selector</title>
<style>
.pseudo::before {
content: "<< ";
color: red;
}
.pseudo::after {
content: " >>";
color: red;
}
</style>
</head>
<body>
<h3 class="pseudo">Example of Pseudo Selctor</h3>
</body>
</html>
Output:
That's it for CSS Selectors.
Thank you for reading.