Introduction to Pseudo-class selectors and pseudo-elements in CSS3

Using HTML5 and CSS3 to develop a cool web page, so for a web front-end developer, CSS3 is also necessary to master, the following discussion with you about CSS3 pseudo-class selectors and pseudo-elements.

Class Selector

In CSS, you can use the class selector to define the same elements as different styles. Like what:
P.left{text-align:left}
P.rigth{text-align:right}

Pseudo class Selector

The difference between a class selector and a pseudo-class selector is that the class selector can be named arbitrarily, and the pseudo-class selector is a well-defined selector in CSS and cannot be named arbitrarily.

The most common pseudo-class selectors

a:link{color: #ff6600}/* Link not visited */
a:visited{color: #87b291}/* The link has been visited */
a:hover{color: #6535b2}/* mouse pointer moves to the link */
a:active{color: #55b28e}/* The link being clicked */

Pseudo element Selector

A pseudo-element selector for selectors that are used by pseudo-elements that have already been defined in the CSS.

How to use:

Selector: Pseudo Element {property: Value}
Working with classes
Selector. Class Name: pseudo element {attribute: value}

In CSS, there are mainly four pseudo-element selectors

1), First-line pseudo-element Selector

The first-line pseudo-element selector is used to style the first line of text in an element.

2), First-letter pseudo-element Selector

The First-letter pseudo-element selector is used to style the first letter of the text in an element (European and American text) or the first word (Chinese or kanji such as Japanese).

3), before pseudo-element selector

The before pseudo-element selector is used to insert some content before an element.

4), after pseudo element selector

The after pseudo-element selector is used to insert content after an element.

Structural pseudo-class selectors root, not, empty, and target

1), Root selector

The root selector binds the style to the root element of the page.

2), not selector

If you want to use a style for a structure element, but want to exclude the sub-structure element below the structure element so that it does not use this style, we can use the not selector.

3), empty selector

The empty selector specifies the style to use when the content in the element is blank.

4), Target selector

The target selector specifies a style for a target element in the page that works only when the user taps a hyperlink in the page and jumps to the target element.

Selectors First-child, Last-child, Nth-child, and Nth-last-child

1), First-child selector

First-child a style that specifies the first child element individually.

2), Last-child selector

LAST-CHILD Specifies the style of the last child element individually.

3), Nth-child selector

Nth-child (n) selector matches positive down nth child element
Nth-child (odd) selector matches positive down odd number of sub-elements
The Nth-child (even) selector matches a positive number down the sub-odd element

4), Nht-last-child selector

Nth-last-child (n) Selector matches the count down nth child element
Nth-last-child (odd) Selector matches the count down the number of odd sub-elements
Nth-last-child (even) selector matches the countdown down to the first even number of child elements

Selector Nth-of-type and Nth-last-of-type

1) Problems arising when using nth-child and Nth-last-child

In the case, the title background of the odd article is yellow and the title of the even article is green.
<div>
<p> content </p>
<p> content </p>
<p> content </p>
<p> content </p>
... ...
</div>

2), using Nth-of-type and Nth-last-of-type

Nth-of-type and Nth-last-of-type are used in CSS3 to avoid the occurrence of the above-mentioned problems, when the statistics are only for the same type of sub-elements of the calculation.
Nth-of-type Positive
Nth-last-of-type Countdown

Compatibility:

Nth-of-type and Nth-last-of-type are CSS3 to start providing browsers that require more than IE8 to be supported, Chrome browser, Firefox browser, Opera browser, Safari browser support!

Looping with styles

Nth-child (an+b) a means that each loop includes several styles, and B indicates where the specified style is located in the loop.

Only-child Selector

A only-child selector that works only on unique child elements.

Introduction to Pseudo-class selectors and pseudo-elements in CSS3