CSS Selectors
Universal Selector:-
Universal selector select all the elements optimally , we use * symbol to use this selector. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Selector</title>
<style>
*{
margin: 0;
padding: 0;
background-color: aqua;
}
</style>
</head>
<body>
<header>
<p>Universal Selector</p>
</header>
<main>
<ul>
<li>Food</li>
<li>Toy</li>
<li>Home</li>
</ul>
</main>
</body>
</html>
Individual Selector:-
Individual selectos are p,nav,span,section,div etc , if you select the p tag then it will select all p tags in the page and it is the same as other tags. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
background-color: #FF6263;
}
li{
background-color: #5DA3FA;
}
</style>
</head>
<body>
<section>
<ul>
<li>Rice</li>
<li>Pen</li>
</ul>
</section>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia provident inventore vitae deleniti adipisci hic quos iure obcaecati rem eaque.</p>
</body>
</html>
Class and id selector:-
It uses class and id to select the elements in DOM. id must be unique in the entire page but class name can be used multiple times. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title{
background-color: #4DD637;
}
.para{
background-color: #F4BE2C;
}
#about{
background-color: #E21717;
}
</style>
</head>
<body>
<header>
<h1 class="title">Title</h1>
</header>
<main>
<section class="para">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium delectus distinctio nobis illum
natus! Quos modi neque ipsa nemo id distinctio delectus, natus voluptatum quia quam hic quibusdam itaque
maiores eius omnis eum eos officiis! Magnam a veritatis inventore optio repellendus recusandae odit
tempora alias! Totam nisi consequatur earum ad.</p>
</section>
<section class="para">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, nostrum incidunt officia enim nihil
dolores earum perspiciatis repudiandae temporibus quod laboriosam eum quae quasi autem facere. Tempore
odit numquam ipsam sapiente odio veritatis eum sit, laborum quas delectus qui dolorem neque enim
adipisci ab exercitationem voluptatibus dolorum asperiores inventore. Quis dolor culpa ad. Sapiente
recusandae ab corrupti temporibus repudiandae cumque.</p>
</section>
<section id="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim aliquid repudiandae sunt suscipit, dolorem ratione eligendi culpa soluta dolore perspiciatis.</p>
</section>
</main>
</body>
</html>
And Selector(chained):-
It selects that element which contains both the class or id. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li.bg.test2{
background-color: #35BDD0;
}
li.bg.test1{
background-color: #FF6666;
}
</style>
</head>
<body>
<main>
<ul>
<li class="bg test1">test1</li>
<li class="bg test2">test2</li>
<li>test3</li>
</ul>
</main>
</body>
</html>
Combined Selector:-
If we want to select multiple elements at once then we use combined selector. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li,section,a{
background-color: aqua;
}
</style>
</head>
<body>
<a href="#">Home</a>
<ul>
<li>BMW</li>
<li>ALTO</li>
</ul>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, in?</p>
</section>
</body>
</html>
Inside an element:-
It drills down in the DOM and selects the child element. Ex.- Div ul li{--------} Here it selects the li as a child.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list ul li{
background-color: #FF6666;
}
section div p{
background-color: #E07C24;
}
</style>
</head>
<body>
<div class="list">
<ul>
<li>Pogo</li>
<li>CN</li>
<li>MAX</li>
</ul>
</div>
<section>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quis asperiores fuga corrupti eligendi neque voluptas praesentium. Veniam repellat itaque cum! Facere saepe perferendis, tenetur dolores iure magni laborum nihil?</p>
</div>
</section>
</body>
</html>
Direct Children(>):-
It selects nodes that are direct children of the first element. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p>a{
background-color: #E21717;
color: #CAD5E2;
}
div>ul>li{
color: #E07C24;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum suscipit ad illum animi itaque enim earum vitae impedit quaerat laudantium! Ipsa, quam aliquam. Dolore pariatur autem iste consequuntur fuga asperiores molestias, hic quis beatae molestiae commodi similique, vitae quo. Dignissimos adipisci voluptates facere minima vitae corrupti qui pariatur enim corporis.<a href="#">Back</a></p>
</div>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
</html>
Sibling:-
There are two types of Sibling selector + and ~.
+ :- It selects the second element if it immediately follows the first element.
~ :- It selects all the siblings which share the same parent.
Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .sibling+li{
color: rgb(226, 98, 43);
} */
.sibling~li{
color: #E07C24;
}
.para+p{
color: rgb(68, 255, 0);
}
</style>
</head>
<body>
<div>
<ul>
<li class="sibling">test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur quia ipsum rem. Dolorem maxime modi numquam libero distinctio incidunt ipsam suscipit quisquam veniam nobis! Quia, vitae ipsam? Doloremque, eaque assumenda.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, doloremque?</p>
</div>
</body>
</html>
Before:-
This is a pseudo selector.If we need to insert any element/text/emoji/link before any element then we use this selector. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before</title>
<style>
a:hover::before{
content: "😍";
/* color: black; */
}
.link::before{
content: '🔗';
}
</style>
</head>
<body>
<a href="#">Link</a>
<br>
<a href="#" class="link">Home</a>
</body>
</html>
After:-
It is a pseudo selector , it inserts any element/emoji/link after any element. Ex.-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>After</title>
<style>
a:hover::after{
content: "💗";
}
p::after{
content: "😀";
}
</style>
</head>
<body>
<a href="#">Link</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, dignissimos.</p>
</body>
</html>