Photo by Jackson Sophat on Unsplash
CSS || Pseudo-classes
This article gives you a Details idea of how to use the Pseudo classes.
Table of contents
- 1.:: after and:: before Pseudo-classes:** These Pseudo-classes are used to add or insert content onto a page without needing to be present in HTML. While After the use of the Pseudo-classes is present at DOM(Document Object Model). Is Mostly For validating Any Input.
- 2. 1: Active pseudo-classes: This pseudo-class is used to select an element that is activated when the user clicks on it. Let's see some Examples to understand the pseudo-class.
- 2. 2: Visited pseudo-classes: This pseudo-class is used to select an element that is already Visited when the user clicks on it. Let's see some examples to understand the pseudo-class.
- 3: The ": hover" is used for adding special effects to an element when the user moves the cursor over the element.
- 4:It selects the element which is focused by the user currently. It works on user input elements used in forms and is triggered as soon as the user clicks on it.
- 5:first-child pseudo-class: It matches a particular element, which is the first child of another element, and adds a special effect to the corresponding element. And Same goes for the llast-child pseudo-class It matches a particular element, which is the last child of another element, and adds a special effect to the corresponding element.
CSS pseudo-classes are used to add special effects to some selectors. Sometimes it combines with a CSS Selector to add more effect to existing elements. For Example, when You Need to change the style of an element when the user moves the pointer into the element(hover). All of these can be easily done by using Pseudo-classes in CSS.
Syntax:
There Are many Pseudo-classes in CSS, as we know CSS is quite a vast topic to explore so we will see some of the common Pseudo-classes commonly used in CSS.
1.:: after and:: before Pseudo-classes:** These Pseudo-classes are used to add or insert content onto a page without needing to be present in HTML. While After the use of the Pseudo-classes is present at DOM(Document Object Model). Is Mostly For validating Any Input.
Html 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" />
<title>Document</title>
<style>
body {
background-color: #414141;
color: #fff;
}
/* before */
form{
display: block;
width: 300px;
border: 2px solid red ;
margin: auto;
}
button
{
display: block;
margin: auto;
}
</style>
</head>
<body>
<div>
<form action="">
<label class="imp-label" for="name"> name </label>
<input type="text" name="name" /><br>
<label class="imp-label" for="email"> email </label>
<input type="text" name="email" /><br>
<button data-tooltip="Tooltip" type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output:
Note: The below example demonstrates We are trying to add 2 circle structures and insert before and after the label tag.
CssCode:
<style>
body {
background-color: #414141;
color: #fff;
}
/* before */
.imp-label::before
{
content: "";
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #d47012;
display:inline-block;
position: relative;
top: 5px;
}
/* after :: part of label */
.imp-label::after
{
content: "";
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #11d334;
display:inline-block;
position: relative;
top: 5px;
}
form
{
display: block;
width: 300px;
border: 2px solid red ;
margin: auto;
}
button
{
display: block;
margin: auto;
}
</style>
-
OutPut
2. 1: Active pseudo-classes: This pseudo-class is used to select an element that is activated when the user clicks on it. Let's see some Examples to understand the pseudo-class.
Html 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">
<title>Document</title>
<style>
body {
background-color: #414141;
color: #fff;
}
.btn-link
{
margin-top: 20%;
background-color: #1f1f1f;
color: #fff;
display: block;
width: 100px;
margin: auto;
margin-top: 20%;
text-align: center;
border: 2px solid black;
text-decoration: none;
border-radius: 0.6em;
}
</style>
</head>
<body>
<a href="#" class="btn-link" target="" class="ink">click here</a>
</body>
Output
Note: We are trying to change the bgc color when linked is active.
Css Code:
a:active
{
box-shadow: 2px 2px 5px #fc894d;
background-color: #fc894d;
}
Output:
2. 2: Visited pseudo-classes: This pseudo-class is used to select an element that is already Visited when the user clicks on it. Let's see some examples to understand the pseudo-class.
Html 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=
, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #414141;
color: #fff;
}
.box-1{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10%;
}
</style>
</head>
<body>
<main>
<div class="box-1">
<h1 class="heading item">Hello There This the example of Visited classs</h1>
<p>This is class simply change the text color if the link is visted</p>
<a href="http://google.com" class="itemtarget="_blank" rel="noopener noreferrer">Click here to to under stand the example</a>
</div>
</main>
</body>
</html>
Output
Note: We are trying to change the text color when linked is visited
CSS Code:
a:visited
{
color:#00ffff;
}
Output:
3: The ": hover" is used for adding special effects to an element when the user moves the cursor over the element.
Html 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">
<title>Document</title>
<style>
body {
background-color: #414141;
color: #fff;
}
li:hover{
background-color: #fff;
}
</style>
</head>
<body>
<ul >
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>
output:
Note: The below example demonstrates that when your mouse enters the list item, its background color changes from black to white.
CSS Code
<style>
li:hover{
background-color: #fff;
}
</style>
Output
4:It selects the element which is focused by the user currently. It works on user input elements used in forms and is triggered as soon as the user clicks on it.
Html 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">
<title>Contact-Me</title>
<style>
html{
background-color:#758283;
}
</style>
</head>
<body>
<h1>My Contact Details</h1>
<p>My Fictional Address</p>
<p>7008637079</p>
<p>myenail@gmil.com</p>
<h2>Fill Out The from please</h2>
<form action="mailto:guduguru@gmail.com" method="post" enctype="text/plain">
<label for="Your Name">Your Name</label>
<input type="text" name="Your Name"><br>
<label for="Your email">Your email</label>
<input type="email" name="Your Email"><br>
<label for="Your Message"> Your Message</label><br>
<textarea name="Your Message" id="" cols="30" rows="10"></textarea><br>
<button type="submit">submit</button>
</form>
</body>
</html>
Output:
Note: The below example demonstrates that when your mouse enters the text input items background color changes from white to sky-blue.
Css Code
.input:focus
{
background-color: aqua;
color: black;
}
OutPut
5:first-child pseudo-class: It matches a particular element, which is the first child of another element, and adds a special effect to the corresponding element. And Same goes for the llast-child pseudo-class It matches a particular element, which is the last child of another element, and adds a special effect to the corresponding element.
Html 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" />
<title>Document</title>
<style>
/* hover */
/* focus */
/* first chil, last child */
/* custom attributes */
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
molestias debitis distinctio nulla modi excepturi magni perferendis
consectetur quidem eos?
</p>
</div>
<div>Welcome to live class</div>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<div>
<input type="text" name="" placeholder="email" id="" />
</div>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div>
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
</div>
<section>
<p>Test 1</p>
<p>Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p lco-code>Test 5</p>
</section>
</body>
</html>
Output:
Note: The below example demonstrates we cant to change the bgc of our first child of the list. CSS Code:
ul li:first-child
{
background-color: wheat;
}
Output:
Designed By -Abhishek Bhuyan