What are selectors?
In simple words, CSS selectors define the pattern of select elements to which a set of CSS rules are applied.
TYPE OF SELECTORS
Universal selector -
define the pattern of selecting all elements on the pages.
when we will write the style tag inside the head tag with * and a set of CSS rules then this property is applied on the whole page.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
</body>
</html>
Output
Individual selector -
This selector selects all elements that have a given node name. If we select the p tag (paragraph tag ) then a set of CSS rules defined by us is applied on every paragraph in a web page.
example
<!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">
<style>
*{
background-color: #414141;
color: ivory;
}
p{
background-color:orange;
color: gold;
}
</style>
<title>Document</title>
</head>
<body>
<h1>hello</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, minima.
<div>Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</p>
</body>
</html>
output
ID selector -
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
- It is written with the hash character (#), followed by the id of the element.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
#devansh{
color: plum;
background-color: #ffffff;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
<p id="devansh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, enim! Consequatur, nemo.</p>
</body>
</html>
Output
Class Selector-
In class, selector selects HTML elements with a specific class attribute It is written with the dot character (.), followed by the class of the element
If we select the class attributes here it is blue (.blue) then a set of CSS rules defined by us is applied to the blue class on a web page.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
.blue{
color:chartreuse
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
<p id="devansh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, enim! Consequatur, nemo.</p>
</body>
</html>
output
And Selector -
And selector selects all the matching nodes on the web page.
like if we select class=san and class=deep inside a div tag and also set the same classes but in a different tag like span tag, a set of rules applied on both tags.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
/* p{
background-color:orange;
color: gold;
} */
/* .blue{
color:chartreuse
}
#devansh{
color: plum;
background-color: #ffffff;
} */
.san,.deep{
background-color: rgb(83, 224, 12);
color: khaki;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, enim! Consequatur, nemo.</p>
<div class="san" class="deep"> Lorem ipsum dolor sit.</div>
<span class="san" class="deep"> Lorem ipsum dolor sit amet consectetur.</span>
</body>
</html>
Output
Combined selector(,)-
In this selector, we can apply a set of CSS rules on the different tags at a time.
like we want paragraph, div, span tag background will become red and text color will yellow then we apply this selector.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
p,h4,span{
background-color:red;
color: yellow;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
</body>
</html>
Output
Inside an element selector( space)-
In this selector, we can apply a set of CSS rules on the hierarchy of tags or the family tree of HTML tags.
If we want to apply CSS rules on the list which is present inside the div tag and the relationship between the div tag and list tag is grandfather and grandson, we want the background color blue and the text color pink then we apply this selector.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
div ul li{
background-color: blue;
color: pink;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
<h4>
<div>
<ol>laptop</ol>
<ol>pc</ol>
</div>
</h4>
<p>
<div>
<ul>
<li>inida</li>
</ul>
</div>
</p>
</body>
</html>
Output
Direct child selector (>)-
It selects any HTML element target by the selector written after greater than character(>)
example
<!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>
*{
background-color: #414141;
color: ivory;
}
div>ul>li{
background-color: rgb(233, 89, 18);
color: rgb(6, 241, 92);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<li> lkj</li>
<ul>
<li>dam</li>
<li>web</li>
<li>red</li>
</ul>
</div>
<div>
<p class="blue">hello</p>
<span>trs</span>
<ol>
<li>re</li>
<li>al</li>
</ol>
</div>
<h4>sun</h4>
<h4>
<div>
<ol>laptop</ol>
<ol>pc</ol>
</div>
</h4>
<p>
<div>
<ul>
<li>inida</li>
</ul>
</div>
</p>
</body>
</html>
Output
.Sibling ~ or + selector -
.sibling is a class attribute and when we used + or ~ with .sibling class then just after next to a sibling are selected.
example
<!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>
*{
background-color: #414141;
color: ivory;
}
.iteam+li{
background-color: rgb(58, 119, 216);
color: yellow;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<div>
<ol>
<li >hyderbad</li>
<li class="iteam">bangalore</li>
<li >jaipur</li>
</ol>
</div>
</body>
</html>
Output
Pseudo class::before -
In CSS before creating a pseudo-element that is the first child of the selected element which allows you to insert"content" before any non-replaced element. it is used to add cosmetic content to an element with content property.
example
<!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>
/* *{
background-color: #414141;
color: ivory;
} */
.lname-f:hover::before{
content:'';
display:block;
width:30px;
height:40px;
border-radius: 40px;
background-color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<form action="">
<label class="lname-f" for="fname">first name</label>
<input type="text" name="name" id="fname">
<label for="lname">last name</label>
<input type="text" name="name" id="lname">
<input type="button" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
output
Pseudo class::after -
In CSS after creating a pseudo-element that is the last child of the selected element it allows you to insert"content" after any non-replaced element. it is used to add cosmetic content to an element with content property.
example
<!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>
/* *{
background-color: #414141;
color: ivory;
} */
.lname-f:hover::after{
content:'';
display:block;
width:30px;
height:40px;
border-radius: 40px;
background-color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aperiam rerum nesciunt aliquid, amet iusto dolorem assumenda cum esse eveniet impedit quam quis?</p>
<form action="">
<label class="lname-f" for="fname">first name</label>
<input type="text" name="name" id="fname">
<label for="lname">last name</label>
<input type="text" name="name" id="lname">
<input type="button" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
Output
Thank you