CSS Introduction | CSS Selectors | Dynamic Pseudo-classes

CSS Dynamic Pseudo-classes

Pseudo-class	Description
`:link`	Selects links to pages the user has not yet visited. This is the default state.
`:visited`	Selects links to pages the user has visited at least once.
`:hover`	Selects links while the user’s mouse cursor is over them.
`:active`	Selects links while the user is clicking them with the mouse.
`:focus`	Selects all input elements that have focus.

Dynamic Pseudo-classes

The dynamic pseudo-classes available in CSS are as follows.

:link
:visited
:hover
:active
:focus

With dynamic pseudo-classes, you can set different styles according to the state of a link.

<style>
    a:link {color: orange;}
    a:visited {color: gray;}
    a:hover {color: blue;}
    a:active {color: red;}
    div:hover { background-color: blue; color: white; }
</style>

Link States

A link has five states, and a separate style can be applied to each state.

link: The default state of a link, where the user has not yet visited the linked page.
visited: The state where the user has visited the linked page at least once.
hover: The state where the user’s mouse cursor is over the link.
active: The state where the user is clicking the link with the mouse.
focus: The state where the element has focus through a keyboard event, mouse event, or another interaction.

:hover works correctly only when it is defined after :link and :visited. :active works correctly only when it is defined after :hover.

<style>
    input { border: 3px solid #FFEFD5; transition: 0.5s; }
    input:focus { border: 3px solid #CD853F; }
</style>