CSS Selector targets the HTML elements in our web page which you want to style.
Types of CSS Selectors
Universal Selector:
This selector is written as asterisk (*) and it affects the entire elements in the Web page.
<!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>CSS Universal selectors</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1>Universal Selectors</h1>
<p>
This selector is written as asterisk (*) and it affects the entire
elements in the Web page.
</p>
<p>
To recognize the differnce between.
<a href="without_universal_selector.html">click Here</a>
</p>
<strong>Code:-</strong>
<code>
<pre>
* {
margin: 0px;
padding: 0px;
}
</pre
>
</code>
</body>
</html>
Individual Selector:
The Individual selector targets a specific element in the HTML.
<!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>Individual Selector</title>
<style>
p {
color: #d5ebec;
background-color: #000000;
}
</style>
</head>
<body>
<h2>Non targeted element written in H2 tag</h2>
<p>This is the targeted element with changed Text and Background Color</p>
<strong>Code:-</strong>
<code>
<pre>
p {
color: #d5ebec;
background-color: #000000;
}
</pre
>
</code>
</body>
</html>
Class(.) and ID(#) Selector
The .class selector selects element with specific class attribute. You can have many elements as you want in a a specific class attribute. The class is denoted by dot(.)
An #id selector uses ID attribute, the name says it all. An #id is unique in nature, the #id of an element is unique within a page. An id is denoted by hash(#) character.
<!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>Class And ID selector</title>
<style>
.myClass {
font-style: italic;
background-color: #deb887;
color: #000000;
}
.code {
color: #540707;
}
#myId{
font-weight: bold;
background-color: #deb887;
color: #000000;
}
</style>
</head>
<body>
<div class="myClass">
<p>
The design of this paragragh is achieved using CSS properties used inside
Class named myClass. It is Denoted by dot(.) e.g  .myClass <br />
<br />
</p>
</div>
<p>
Look at the code used here:
<br />
<pre> <code class="code"
>.myClass {
font-style: italic;
background-color: #deb887;
color: #000000; }</code
></pre>
</p>
<div id="myId">
<p>
The design of this paragragh is achieved using CSS properties used inside
ID named myId. It is Denoted by hash(#) e.g   #myId <br>
</p>
</div>
<p>
Look at the code used here:
<br />
<pre> <code class="code"
>#myId{
font-weight: bold;
background-color: #deb887;
color: #000000;
}</code></pre>
</p>
</body>
</html>
And Selector (chained Selector)
Chaining a selector in CSS means selecting elements or an attrbute e.g (classes, id's) in a sequence in order to style that particular Document/content of that website.
Note: While selecting an attribiue for e.g classes or Id's, any space in between the classes or ID’s will break the chain, and so the desired outcome will not be achieved.
<!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>Chain Selector</title>
<style>
.chain ul li.selector {
background-color: black;
color: #ffebcd;
}
.note {
font-style: italic;
}
</style>
</head>
<body>
<h3>Chain Selector</h3>
<div class="chain">
<ul>
<li class="selector">Item1</li>
<li class="selector">Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
<p class="note">
Note: While selecting an attribiue for e.g classes or Id's, any space in
between the classes or Id's will break the chain, and so the desired
outcome will not be achieved.
</p>
<br />
<h2>Code:</h2>
<code>
<pre>
.chain ul li.selector
{
background-color: black; color: #ffebcd;
}</pre>
</code>
</body>
</html>
Combined Selector(,)
When multiple selectors share the same styling methods to different elements, they can be grouped together separated by comma ( , ) . For e.g- h1, p, span{ background color: black; font-style: italic}
<!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>Combined Selector</title>
<style>
h2,
p {
background-color: #ede07d;
color: #00008b;
}
</style>
</head>
<body>
<h2>Combined Selector</h2>
<p>
When multiple selectors share the same styling methods to different
elements, they can be grouped together separated by comma ( , ) . For e.g
<br />
</p>
<pre>Code:
<strong>h1, p, span
{
background color: black;
font-style: italic
color: #00008b;
}</strong></pre>
</body>
</html>
Inside Element Selector:
This selector is used to select element inside the element.
<!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>Inside an Eelement Selector</title>
<style>
div ul {
background-color: #ffebcd;
}
</style>
</head>
<body>
<p>
<strong>Defination:</strong> This selector is used to select element
inside the element
</p>
<div>
<h2>Inside of an Element</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<code>
<pre> <strong>
div ul
{
background-color: #ffebcd;
}</strong></pre>
</code>
</body>
</html>
Direct Child Selector (>)
The Direct Child Selector is denoted by this symbol: (>). It matches the second element matched by the selector that are direct child of the first elements.
<!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>Direct Child Selector</title>
<style>
div > ul > li > p {
background-color: burlywood;
color: blue;
font-style: oblique;
}
</style>
</head>
<body>
<h2>Direct Child Selector</h2>
<div>
<ul>
<li><p>Styled using Direct Child Selector</p></li>
<li>item 2</li>
</ul>
</div>
<strong>Code:-</strong>
<code>
<pre>
div > ul > li > p
{
background-color: burlywood;
color: blue;
font-style: oblique;
}
</pre>
</code>
<strong>Defination:</strong>
<p>
<em
>The Direct Child Selector is denoted by this symbol: (>). <br />
It matches the element matched by the selector that are direct child of
the first elements.
</em>
</p>
</body>
</html>
Pseudo-Selectors(::before and ::after)
A Pseudo element is used to give an element some special functionality.
Note:- In order to use this Pseudo-selectors, content property must be added, otherwise the selectors won't work.
<!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>Pseudo Selector</title>
<style>
.before:hover::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<form action="">
<label class="before" for="name">name</label>
<input type="text" name="name" />
<label for="email">email</label>
<input type="email" name="email" id="" />
</form>
</div>
</body>
</html>
GitHub Link: Source Code