Hi Everyone,
let's talk about what are the types of selectors are present in CSS
before starting, let's talk about what CSS is:
CSS stands for cascading style sheet. It's responsible for making beautiful web pages like text -styling, position, images etc.
we can add CSS in 3 different ways 1)inline-css, 2)internal CSS, and 3)external CSS.
*let's move on to the 'selectors'
Types of selectors present in CSS
let's talk about one by one :
1.Universal selector(*) :
They select all the elements that are present in the HTML file.
for example:
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
*{
color: blueviolet;
}
</style>
</head>
<body>
<h3>universal selector</h3>
<p>this is universal selector </p>
</body>
</htm>
see the above example the universal selector is represented by " * ". they select all the elements and applied the style. see the below output:
2.individual selector :
select the specific element yo want to target for example:
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
p{
color: red;
}
h3{
color: yellow;
}
</style>
</head>
<body>
<h3>universal selector</h3>
<p>this is universal selector </p>
</body>
</htm>
see the above output that selects the only targeted element.
3.Class and Id selectors :
if you want to select a class in CSS you need to use "Dot"(.) with class name for example
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
.container{
color: red;
font-size: 50px;
font-weight: 10px;
}
</style>
</head>
<body>
<header class="container">universal selector</header>
<p>this is universal selector </p>
</body>
</htm>
see the below output selecting a class using "." class name
if you want to select a id in CSS you need to use "Hash"(#) with id name for
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
#container{
color: green;
font-size: 50px;
font-weight: 10px;
}
</style>
</head>
<body>
<header id="container">universal selector</header>
<p>this is universal selector </p>
</body>
</htm>
see the below output selecting a id using "#" with id name
4.And(Chained) selector : chained selector is basically select multiple classes and id's let's see how it's work, example
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
li.text.text{
color: green;
font-size: 50px;
font-weight: 10px;
}
</style>
</head>
<body>
<ul>
<li class="text">paragraph 1</li>
<li>paragraph 2</li>
<li>paragraph 3</li>
<li class="text">paragraph 4</li>
<li>paragraph 5</li>
</ul>
<p>this is universal selector </p>
</body>
</htm>
see the output below if both conditions are true then style will be applied.
5.Combined selector : The combined selector is used when multiple elements need to be same style, for example we have li, P, h3 elements.
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
li,p,h3{
color: #FF9F4A ;
font-size: 50px;
font-weight: 10px;
}
</style>
</head>
<body>
<ul>
<li>text 1</li>
</ul>
<p>paragraph</p>
<h3>heading</h3>
</body>
</htm>
see the below output we use comma(,) for selecting multiple elements.
6.Inside an element : inside an element is basically used for selecting child element for, example we have multiple div and inside the div have multiple ul list element shown below. div(parent) ul li(children of div)
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
div ol li{
color: #FF9F4A ;
font-size: 50px;
font-weight: 10px;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>text 1</li>
<li>text 2</li>
</ul>
</div>
<div>
<ol>
<li>text 1</li>
<li>text 2</li>
</ol>
</div>
</body>
</htm>
Output:
see the above output you can notice that space will require to select child element.
7.Direct child element : The direct child element is basically selected the parent class of a child element for example
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
div>ul{
color: #FF9F4A ;
font-size: 50px;
font-weight: 10px;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>text 1</li>
<li>text 2</li>
</ul>
</div>
<div>
<ol>
<li>text 1</li>
<li>text 2</li>
</ol>
</div>
</body>
</htm>
Output:
for selecting direct child element we use greater angle bracket('>').
8.Sibling selector : This selector is basically select the class and id for particular element like p , h tags etc. example:
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
<style>
.sibling +li{
color: #FF9F4A ;
font-size: 50px;
font-weight: 10px;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>text 1</li>
<li>text 2</li>
</ul>
</div>
<div>
<ol>
<li>list elements 1</li>
<li>list elements 2</li>
<li class="sibling">list elements 3</li>
<li>list elements 4</li>
<li>list elements 5</li>
</ol>
</div>
</body>
</htm>
Output:
Pseudo-Selectors ( ::before and ::after)
Pseudo selector provides a specific element to special functionality example:
<!Doctype HTML>
<html>
<head>
<title>Universal selector</title>
</head>
<style>
.hov:hover::before{
content: "";
background-color: blueviolet;
border-radius: 15px;
display:inline-block;
height: 15px;
width: 35px;
}
</style>
</head>
<body>
<form>
<label class="hov" >First Name</label>
<input type="text">
<label >Password</label>
<input type="password">
</form
</body>
</htm>
if i goes my cursor to first then hover functionality work shown above.
