Elements:

Selector: pseudo class {property: value;}

Links can be displayed in different ways:

/*Links not visited*/ 
a:link {   color: red; } 
/*Browsed links*/
 a:visited {   color: green; } 
/*Mouse over links*/ 
a:hover {   color: hotpink; }
 /*Selected links*/ 
a:active {   color: blue; }

Be careful:a:hoverMust be defined in CSSa:linkAfter anda:visitedThen it will take effect!a:activeMusta:hoverOnly valid after CSS definition! Pseudo class names are not case sensitive.

Pseudo class and CSS class

Pseudo classes can be used in conjunction with CSS classes: when you hover over a link in the example, it changes color:

a.highlight:hover { color: #ff0000; }

Hover over

upper

Hover is in.

Example of using pseudo classes on element:

div:hover { background-color: blue; }

Simple tooltip hover

Hover over

Element to display

Elements such as tooltips

p {display: none;background-color: yellow;padding: 20px; } 
div:hover p {display: block; }

: first child pseudo class

:first-childThe element specified by the pseudo class is the first sub match of another element. In the following example, the selector matches the first child of any element

Elements:

p:first-child { color: blue; }

Match all

First element in element

p i:first-child { color: blue; }

Match all first children

All elements in element

p:first-child i { color: blue; }

Lang pseudo class

:langPseudo classes allow you to define special rules for different languages. In the following example: Lang is defined using lang = “no”Reference to element:

q:lang(no) { quotes: "~" "~"; }

All CSS pseudo classes

selector	Example	describe
:active	a:active	Select active link
:checked	input:checked	Select each selectedelement
:disabled	input:disabled	Select each disabledelement
:empty	p:empty	Select each of the element
:enabled	input:enabled	Select each enabledelement
:first-child	p:first-child	Select each of the first child elements of its parent element
:first-of-type	p:first-of-type	Choose each Element, which is the first of its parent elements element
:focus	input:focus	Select with focuselement
:hover	a:hover	Select link on mouse over
:in-range	input:in-range	Select theelement
:invalid	input:invalid	Select all with invalid valueselement
:lang(language)	p:lang(it)	Select each with a lang attribute value that starts with “it” element
:last-child	p:last-child	Select each of the last child elements of its parent element
:last-of-type	p:last-of-type	Choose each Element, which is the last of its parent elements element
:link	a:link	Select all unread links
:not(selector)	:not(p)	Choice is not Each element of an element
:nth-child(n)	p:nth-child(2)	Select each of the second child elements of its parent element
:nth-last-child(n)	p:nth-last-child(2)	Choose each Element as the second child of its parent, calculated from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Choose each Element as the second of its parent Element, calculated from the last child element
:nth-of-type(n)	p:nth-of-type(2)	Choose each Element, which is the second of its parent element element
:only-of-type	p:only-of-type	Choose each Element, which is the only one of its parent elements element
:only-child	p:only-child	Choose each Element, which is the only child of its parent element
:optional	input:optional	Select the one without “required” attributeelement
:out-of-range	input:out-of-range	ChoiceElement whose value is out of the specified range
:read-only	input:read-only	Select theelement
:read-write	input:read-write	Select the one without the “readonly” attributeelement
:required	input:required	Select theelement
:root	root	Select the root element of the document
:target	#news:target	Select the ා news element of the current activity (click the URL containing the anchor name)
:valid	input:valid	Select all with valid valueselement
:visited	a:visited	Select all visited links

All CSS pseudo elements

selector	Example	describe
::after	p::after	In each Insert content after element
::before	p::before	In each Insert content before element
::first-letter	p::first-letter	Choose each First letter of element
::first-line	p::first-line	Choose each First line of element
::selection	p::selection	Select user selected element section