CSS Pseudo-classes
Another tool in the CSS selector toolbox is the pseudo-class.
A pseudo-class allows you to select elements based on some special state of the element, in addition to all the selectors previously discussed.
Pseudo-classes start with a colon and can be used alone or in conjunction with other selectors.
Some pseudo-classes let you select elements based on UI state, while others let you select elements based on their position in the document (with more precision than the combinators).
UI state
These pseudo-classes are based on some UI state.
:active
Matches an element that is currently being activated.
For buttons and links, this usually means the mouse button has been pressed but not yet released.
:checked
Matches a radio button, checkbox, or option inside a select element that is checked or selected.
: focus
Matches an element that currently has the focus. This is typically used for buttons, links, and text fields.
: hover
Matches an element that the mouse cursor is currently hovering over.
This is typically used for buttons and links but can be applied to any type of element.
:valid, :invalid
Used with form elements using HTML5 validation.
The :valid pseudo-class matches an element which is currently valid according to the validation rules, and :invalid matches an element which is not currently valid.
:visited
Matches a link whose URL has already been visited by the user.
To protect a user’s privacy, the browser limits what styling can be done on an element matched by this pseudo-class.
Syntax For Pseudo classes -
|
Selector:pseudo-class{
Property: value;
}
|
Now we will see a few Examples -
Example -
Output-
Example -
|
<!DOCTYPE html>
<html lang="en">
<style>
/* for universal links*/
a:link {
color: violet;
}
/* visited link */
a:visited {
color: blue;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: red;
}
</style>
<head>
<link rel="stylesheet" href="sample.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<title>Document</title>
</head>
<body>
<h1 class="one">link to goole.com</h1>
<p><b><a href="https://www.facebook.com/" target="_blank">CLICK HERE TO GO TO GOOGLE</a></b></p>
</body>
</html>
|
Output
1 -
Now we will see the list of pseudo-classes -
