1.CSS SELECTOR
CSS selectors are used to select the content you want to style. CSS provides you with a number of different ways to do.
UNIVERSAL SELECTOR
INDIVIDUAL SELECTOR
CLASS AND ID SELECTOR
COMBINED SELECTOR
INSIDE AN ELEMENT SELECTOR
DIRECT CHILD SELECTOR
SIBLING SELECTOR
UNIVERSAL SELECTOR
CSS universal selector is denoted using asterisk(*). It can be used to select any and all types of elements in an HTML page. This selector is useful when we want to select all the elements on the page.
SYNTAX
*** { style properties } **
<!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</title>
<style>
*{
background-color: #435;
color: whitesmoke;
}
</style>
</head>
<body>
<h1>INTRO TO CSS</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam et harum laborum amet qui consectetur non. Deleniti repellat perspiciatis rerum.
</p>
</body>
</html>
OUTPUT
INDIVIDUAL SELECTOR
This selector is useful when we want to select a particular element on the page.
SYNTAX
**element{ style properties } **
<!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</title>
<style>
h1{
background-color: rgb(134, 96, 55);
color: whitesmoke;
text-align: center;
}
p{
background-color: rgb(134, 96, 55);
color: whitesmoke;
text-align: center;
}
</style>
</head>
<body>
<h1>iNEURON</h1>
<p>iNeuron started as a product development company, then launched its ed-tech division. We provide 360 degree solutions from learning to internship to finding a job, and the first ever educational OTT platform to upgrade your skill set.</p>
</body>
</html>
OUTPUT
CLASS AND ID SELECTOR
The class selector selects elements with a specific class attribute. It matches all the HTML elements based on the contents of their class attribute. The **(.)**symbol, along with the class name, is used to select the desired class. The **ID selector **matches an element based on the value of its id attribute. In order for the element to be selected, its ID attribute must exactly match the value given in the selector. The (#) symbol and the id of the HTML element name are used to select the desired element.
SYNTAX
.class-name { style properties }
#id-name { style properties }
<!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</title>
<style>
.main {
background-color: #FFAFA4;
}
#demo {
background-color: #DEDAF7;
}
</style>
</head>
<body>
<div class="main">
<h3>Welcome to FJS2.0!</h3>
<p id="demo">with an ID</p>
<p>with no ID</p>
</div>
</body>
</html>
OUTPUT
COMBINED SELECTOR
This selector is useful when we want to select multiple elements on the page.
SYNTAX
**element1,element2{ style properties } **
<!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</title>
<style>
.main {
background-color: #FFAFA4;
}
</style>
</head>
<body>
<div class="main">
<h3>Welcome to FJS2.0!</h3>
<p id="demo">HITESH SIR</p>
<p>ANURAG SIR</p>
</div>
</body>
</html>
OUTPUT
INSIDE AN ELEMENT SELECTOR
The inside an element selector is used to select elements with a specific parent.
SYNTAX
**element1 element2 element3{ style properties } **
** element1>element2>element3{ style properties } **
<!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</title>
<style>
body{
background-color: antiquewhite;
}
div ul li{
background-color:white;
color: blueviolet;
}
</style>
</head>
<body>
<h1>HITESH SIR</h1>
<div class>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</div>
<h2>ANURAG SIR</h2>
<div class>
<ul>
<li>JAVASCRIPT</li>
<li>JAVASCRIPT</li>
<li>JAVASCRIPT</li>
</ul>
</div>
</body>
</html>
OUTPUT
DIRECT CHILD SELECTOR
The CSS child selector uses the** > character **to target an element that is a direct child of a specified parent.
SYNTAX
**element1 element2{ style properties } **
** element1>element2{ style properties } **
<!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</title>
<style>
body{
background-color: antiquewhite;
}
div ul{
background-color:white;
color: blueviolet;
}
</style>
</head>
<body>
<div class>
<h1>HITESH SIR</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</div>
<div class>
<h2>ANURAG SIR</h2>
<ol>
<li>JAVASCRIPT</li>
<li>JAVASCRIPT</li>
<li>JAVASCRIPT</li>
</ol>
</div>
</body>
</html>
OUTPUT
SIBLING SELECTOR
The sibling selector (+ (or)~) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
SYNTAX
**element1~element2{ style properties } **
** element1+element2{ style properties } **
<!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</title>
<style>
body{
background-color: antiquewhite;
}
.sibling+li{
background-color:white;
color: blueviolet;
}
</style>
</head>
<body>
<div>
<h1>HITESH SIR</h1>
<ul>
<li class="sibling">HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</div>
<div>
<h2>ANURAG SIR</h2>
<ol>
<li class="sibling">JAVASCRIPT</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
</div>
</body>
</html>
OUTPUT
2.PSEUDO SELECTORS
Pseudo class selectors are CSS selectors with a **colon preceding **them. For Example, changing the style of an element when the user hovers over it.
BEFORE
AFTER
BEFORE
The **::before **pseudo-element can be used to insert some content before the content of an element.
SYNTAX
**selector:: pseudo-class{ property: value; } **
<!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</title>
<style>
body{
background-color: antiquewhite;
}
.user::before{
content:'';
display: block;
width: 10px;
height:10px;
background-color: blue;
}
</style>
</head>
<body>
<form action="#">
<div>
<label class="user" for="name">USERNAME:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label class="user" for="password">PASSWORD:</label>
<input type="password" name="password" id="password">
</div>
<button>Login</button>
</form>
</body>
</html>
OUTPUT
AFTER
The **::after **pseudo-element can be used to insert some content after the content of an element.
SYNTAX
**selector:: pseudo-class{ property: value; } **
<!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</title>
<style>
body{
background-color: antiquewhite;
}
.user::after{
content:'';
display: block;
width: 10px;
height:10px;
background-color: blue;
}
</style>
</head>
<body>
<form action="#">
<div>
<label class="user" for="name">USERNAME:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label class="user"for="paaword">PASSWORD:</label>
<input type="password" name="password" id="password">
</div>
<button>Login</button>
</form>
</body>
</html>
OUTPUT