Do you understand CSS3 pseudo class and pseudo element

Time:2020-1-14

What is a pseudo class?

Pseudo classes are used to define the special state of an element. For example, it can be used to:

  • Style an element when you hover the mouse over it
  • Different styles of links visited and not visited
  • Style elements when you get focus

Syntax of pseudo class

The descendant selector matches all elements that are descendants of the specified element. The following example selection

All within element

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