Scribd
Upload
30 views

CSS Psuedo Class

Pseudo-classes are used to define special states of CSS selectors. They allow elements to be styled differently depending on states like hover, active, focus. Common pseudo-classes include :hover, :active, :link, :visited which are used to style links differently based on their state. Pseudo-classes can be used to style elements when a user interacts with them, like hovering or clicking.

Uploaded by

Aditi sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
30 views

CSS Psuedo Class

Pseudo-classes are used to define special states of CSS selectors. They allow elements to be styled differently depending on states like hover, active, focus. Common pseudo-classes include :hover, :active, :link, :visited which are used to style links differently based on their state. Pseudo-classes can be used to style elements when a user interacts with them, like hovering or clicking.

Uploaded by

Aditi sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS Pseudo-classes

What are Pseudo-classes?


A pseudo-class is used to define a special state of an element. For

example, it can be used to:

Style an element when a user mouses over it


Style visited and unvisited links differently
Style an element when it gets focus

Mouse Over Me

Syntax
The syntax of pseudo-classes:

selector:pseudo-class
{ property: value;
}

Anchor Pseudo-classes
Links can be displayed in different ways:

Example
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited { color: #00FF00;
}

/* mouse over link */ a:hover {


color: #FF00FF;
}

/* selected link */ a:active {


color: #0000FF;
}
Try it Yourself »
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.

ADVERTISEMENT

Pseudo-classes and HTML Classes


Pseudo-classes can be combined with HTML classes:

When you hover over the link in the example, it will change color:

Example
a.highlight:hover
{ color: #ff0000;
}
Try it Yourself »

Hover on <div>
An example of using the :hover pseudo-class on a <div> element:

Example
div:hover {
background-color: blue;
}
Try it Yourself »

Simple Tooltip Hover


Hover over a <div> element to show a <p> element (like a tooltip):

Hover over me to show the <p> element.


Example
p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p { display:
block;
}
Try it Yourself »

CSS - The :first-child Pseudo-class


The :first-child pseudo-class matches a specified element that is the first child of another
element.

Match the first <p> element


In the following example, the selector matches any <p> element that is the first child of any
element:

Example
p:first-child
{ color: blue;
}
Try it Yourself »
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in all <p> elements:

Example
p i:first-child
{ color: blue;
}
Try it Yourself »

Match all <i> elements in all first child <p>


elements
In the following example, the selector matches all <i> elements in <p> elements that are the
first child of another element:

Example
p:first-child i
{ color: blue;
}
Try it Yourself »

CSS - The :lang Pseudo-class


The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for <q> elements with lang="no":

Example
<html>
<head>
<style> q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>
Try it Yourself »

More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

Exercise:
Set the background-color to red, when you mouse over a link.

<style>
{
background-color: red;
}
</style>

<body>

<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://w3schools.com">This is a link.</a>

</body>

Submit Answer » Start the Exercise


All CSS Pseudo Classes
Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element

:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no children

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first child of

its parent

:first-of-type p:first-of-type Selects every <p> element that is the first <p>

element of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a value within a


specified range

:invalid input:invalid Selects all <input> elements with an invalid value

:lang(language) p:lang(it) Selects every <p> element with a lang attribute value

starting with "it"

:last-child p:last-child Selects every <p> elements that is the last child of its

Parent

:last-of-type p:last-of-type Selects every <p> element that is the last <p>

element of its parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of

its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of

its parent, counting from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p>
element of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p>

element of its parent

:only-of-type p:only-of-type Selects every <p> element that is the only <p>

element of its parent

:only-child p:only-child Selects every <p> element that is the only child of its

Parent

:optional input:optional Selects <input> elements with no "required" attribute

:out-of-range input:out-of-range Selects <input> elements with a value outside a

specified range

:read-only input:read-only Selects <input> elements with a "readonly" attribute

Specified

:read-write input:read-write Selects <input> elements with no "readonly" attribute

:required input:required Selects <input> elements with a "required" attribute

Specified
:root root Selects the document's root element

:target #news:target Selects the current active #news element (clicked on a


containing that anchor name)

:valid input:valid Selects all <input> elements with a valid value

:visited a:visited Selects all visited links

All CSS Pseudo Elements


Selector Example Example description

::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

::selection p::selection Selects the portion of an element that is selected by a

User

You might also like