CSS Pseudo-Classes

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

CSS pseudo-classes are used to add special effects to HTML elements.

You can set effects to the following HTML elements:

when a user mouses over it.

when a user mouses gets focus.

when a user visit and unvisited links .

Syntax : Pseudo Classes (Events)

selector:pseudo-class {
property: value;
}
selector.class:pseudo-class {
property: value
}

You can set following properties to pseudo-classes −

:link - a normal, unvisited link.

:visited - a link the user has visited link.

:hover - a link when the user mouses a:hover - a link when the user mouses over it.

:active - a link on which the user is currently clicking.

:focus - used to add special style to an element while the element has focus.

:first-child - used to add special style to an element that is the first child of some other element.

:lang - Used to specify a language to use in a specified element.

Links can be displayed in different ways.Check how links are displayed to different events. CSS - Links Tutorial

Buttons can be displayed in different ways.Check how buttons are displayed to different events. CSS - Links Tutorial

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
input:focus {
background-color: yellow;
color:red;
}

</style>
</head>
<body>
<p>Code Always.</p>
<p>Code Always To Become Best Programmer.</p>

<form action="/action_page.php" method="get">
First Name: <input type="text" name="fname"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Pseudo Classes (Events)

Syntax : Pseudo Classes (Events)

Example :

Result