Scribd
Upload
4 views

CSS Pseudo.docx

Bca css notes web technologies

Uploaded by

aryankumarhuda3326
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Pseudo.docx

Bca css notes web technologies

Uploaded by

aryankumarhuda3326
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS Pseudo-classes

●
●
●
CSS Pseudo-classes are powerful and allow developers to style elements
based on their specific states. This guide will walk you through the most
commonly used pseudo-classes and how to use them effectively.
Pseudo-classes in CSS are used to define the special state of an element.
They can be combined with a CSS selector to add an effect to existing
elements based on their states. For instance, you can change the style of an
element when the user hovers over it, or when a link is visited. All of these can
be achieved using Pseudo Classes in CSS.
Note that pseudo-class names are not case-sensitive.
Syntax
selector: pseudo-class{
property: value;
}
There are many Pseudo-classes in CSS but the ones that are most commonly
used are as follows:
Table of Content
● CSS :hover Pseudo Class
● CSS :active Pseudo Class
● CSS :focus Pseudo Class
● CSS :visited Pseudo Class
● CSS :not Pseudo Class
● CSS Pseudo Classes – FAQs
1. CSS :hover Pseudo Class
This pseudo-class is used to add a special effect to an element when our
mouse pointer is over it. The below example demonstrates that when your
mouse enters the box area, its background color changes from yellow to
orange.
Example: This example shows the hover pseudo-class in CSS.
HTML
<!DOCTYPE html>
<html>

<head>
<title>CSS :hover Pseudo Class</title>
<style>
.box {
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}

.box:hover {
background-color: orange;
}

h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:hover Pseudo-class</h2>
<div class="box">
My color changes if you hover over me!
</div>
</body>

</html>

Output:
2. CSS :active Pseudo Class
This pseudo-class is used to select an element that is activated when the user
clicks on it. The following example demonstrates that when you click on the
box, its background color changes for a moment.
Example: This example shows the active pseudo-class in CSS.
HTML
<!DOCTYPE html>
<html>

<head>
<title>CSS :active Pseudo Class</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}

.box:active{
background-color: orange;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:active Pseudo-class</h2>
<div class="box">
My color changes for a moment if you click me!
</div>
</body>

</html>

Output:

3. CSS :focus Pseudo Class


This pseudo-class is used to select an element that is currently focused by the
user. It works on user input elements used in forms and is triggered as soon
as the user clicks on it. In the following example, the background color of the
input field which is currently focused changes.
Example: This example shows the focus pseudo-class in CSS.
HTML
<!DOCTYPE html>
<html>

<head>
<title>CSS :focus Pseudo Class</title>
<style>
form{
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 2rem;
}

label{
width: 30%;
}

input{
background-color: default;
float: right;
}

input:focus{
background-color: grey;
}

h1, h2{
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:focus Pseudo-class</h2>
<form>
<label for="username">Username:</label>
<input type="text" name="username"
placeholder="Enter your username" />
<br>

<label for="emailid">Email-Id:</label>
<input type="email" name="emailid"
placeholder="Enter your email-id" />
<label for="Password">Password:</label>
<input type="password" name="Password"
placeholder="Enter your password" />
</form>
</body>

</html>

Output:

4. CSS :visited Pseudo Class


This pseudo-class is used to select the links which have been already visited
by the user. In the following example, the color of the link changes once it is
visited.
Example: This example shows the visited pseudo-class in CSS.
HTML
<!DOCTYPE html>
<html>

<head>
<title>CSS :visited Pseudo Class</title>
<style>
body{
text-align: center;
}

h1, h2{
color: green;
}
a:visited{
color: red;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:visited Pseudo-class</h2>

<p>
<a href="https://www.geeksforgeeks.org/" target="_blank">
My color changes once you visit this link
</a>
</p>
</body>

</html>

Output:

5. CSS :not Pseudo Class


This pseudo-class is used to select elements that do not match a specific
selector.
Example: In the following example, the :not pseudo-class is used to select all
h1 elements that do not have the class “special”. The color of these h1
elements will be set to green.
HTML
<!DOCTYPE html>
<html>

<head>
<title>CSS :not Pseudo Class</title>
<style>
h1:not(.special) {
color: green;
}
</style>
</head>

<body>
<h1 class>GeeksforGeeks</h1>
<h2>:not Pseudo-class</h2>
<h1 class="special">Special Header</h1>
</body>

</html>

Output:

CSS Pseudo Classes – FAQs


What are CSS pseudo-classes?
CSS pseudo-classes are keywords added to selectors that specify a special
state of the selected elements. CSS pseudo-classes allow you to style
elements based on their state or position in the document tree.
What is the CSS pseudo-class for styling a link when it is hovered
over?
The CSS pseudo-class for styling a link when it is hovered over is :hover. For
example, a:hover applies styles to a link when the user hovers over it with a
cursor.
What is the CSS pseudo-class for styling the first child of an element?
The CSS pseudo-class for styling the first child of an element is :first-child. For
example, p:first-child applies styles to the first <p> element within its parent
container.
What is the CSS pseudo-class for selecting every other element?
The CSS pseudo-class for selecting every other element is :nth-child(odd) for
odd-numbered elements and :nth-child(even) for even-numbered elements.
For example, tr:nth-child(odd) applies styles to every other row in a table.
What is the CSS pseudo-class for styling an element that has no
children?
The CSS pseudo-class for styling an element that has no children is :empty.
For example, div:empty applies styles to a <div> element that contains no
child elements or text.

You might also like