Table of contents
No headings in the article.
Universal Selector:- It is a selector which selects all elements.
code:-
<!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: orange;
}
</style>
<title>Universal Selector</title>
</head>
<body>
<div>
<span>hey</span>
<p class="styles">hello</p>
<p>Hi</p>
</div>
</body>
</html>
Type Selector:- which matches the elements by node name.
code:-
<!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>
span{
background-color: orange;
}
</style>
<title>Type Selector</title>
</head>
<body>
<div>
<span>style applied here</span>
<p class="styles">hello</p>
<p>Hi</p>
</div>
</body>
</html>
And Selector :- styles applied to the matched element.
code :-
<!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>
div p{
background-color: orange;
}
</style>
<title>And Selector</title>
</head>
<body>
<div>
<span>style applied here</span>
<p class="styles">hello</p>
<p>Hi</p>
</div>
</body>
</html>
Combined Selector :- selects multiple elements to pass the styles.
code :-
<!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>
span,ul{
background-color: orange;
}
</style>
<title>Combined Selector</title>
</head>
<body>
<span>style applied here</span>
<p class="styles">hello</p>
<p>Hi</p>
<ul>
<li>style applied here</li>
<li>style applied here</li>
</ul>
</body>
</html>
Pseudo-Classes:- Pseudo selector specifies special state assigned to selected element.It assigned with colon (::before,::after,:hover).
Code :-
<!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>
p:hover::after{
content: "Style Applied Here ";
color: red;
}
</style>
<title>Pseudo Selector</title>
</head>
<body>
<p>Style Applied Next after hover on me </p>
<p class="styles">Style Applied Next after hover on me </p>
<p>Style Applied Next after hover on me </p>
<ul>
<li>hey</li>
<li>hello</li>
</ul>
</body>
</html>
Class Selector :- It matches elements based on contents of their class attribute.Class selector assigned to different elements with different values and same value will be assigned where we need to use same css for an element.
Code : -
<!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>
.styles{
background-color: orange;
}
</style>
<title>Class Selector</title>
</head>
<body>
<div>
<span>hello</span>
<p class="styles">style applied here</p>
<p>Hi</p>
</div>
</body>
</html>