css pseudo-classes and pseudo-elements

1. Pseudo-classes and pseudo-elements

css introduces the concepts of pseudo-classes and pseudo-elements for Format information outside the document tree. In other words, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter in a sentence or the first element in a list. The pseudo-classes and pseudo-elements are explained below respectively:

Pseudo-classis used to add corresponding styles to existing elements when they are in a certain state. This state is based on the user Behavior and dynamic changes. For example, when the user hovers over a specified element, we can use :hover to describe the state of this element. Although it is similar to an ordinary CSS class and can add styles to existing elements, it can only add styles to elements when it is in a state that cannot be described by the DOM tree, so it is called a pseudo class.

Pseudo elementsare used to create some elements that are not in the document tree and add styles to them. For example, we can use :before to add some text in front of an element and add styles to this text. Although the text is visible to the user, it is not actually in the document tree.

##2. The difference between pseudo-classes and pseudo-elements

Here are two examples to illustrate the difference between the two.

The following is a simple html list fragment:

I am the first< ;/li>
I am the second one

If you want to add a style to the first item, you can add a class to the first

and define the corresponding style in the class:

　HTML:

I am the first

CSS:

li.first-item {color: orange}

If there is no need to add a class method, we can add styles to it by setting the :first-child pseudo-class of the first

. At this time, the modified

element is still in the document tree.

HTML:

I am the first
I am the second one

CSS:

li:first-child {color: orange}

Here is another simple html paragraph fragment:

Hello World, and wish you have a good day!

If you want to add a style to the first letter of the paragraph, you can wrap a element in the first letter and set the style of the span element:

HTML:

Hello World, and wish you have a good day!

CSS:

.first{font-size: 5em;}

If we do not create a element, we can add styles to it by setting the :first-letter pseudo-element of

. At this time, it looks like a virtual element is created and styles are added, but in fact this element does not exist in the document tree.

HTML:

Hello World, and wish you have a good day!

CSS :

p:first-letter {font-size: 5em;}

## As can be seen from the above example, the operating object of the pseudo class is the document An element already exists in the tree, while a pseudo-element creates an element outside the document number. Therefore, the difference between pseudo-classes and pseudo-elements is:

Whether or not an element outside the document tree is created.

The origin of confusion between pseudo-classes and pseudo-elementsThe most confusing , probably most people casually call pseudo-elements like :before and :after pseudo-classes, and even if the concepts are confused, there is no problem in actual use - because even if the concepts are confused, there is no problem in actual use. How much trouble will it cause:)

Requirements in the CSS3 specification

Use double colons (::) to represent pseudo elementsto distinguish pseudo elements and pseudo classes. For example, pseudo-elements such as ::before and ::after use double colons (::), and pseudo-classes such as :hover and :active use single colons (:). Except for some browsers lower than IE8, most browsers support the double colon (::) representation method of pseudo elements.

Usage of pseudo-classes and pseudo-elements

##Pseudo-class

##1 :linkSelect an unvisited link

2 :visitedSelect the visited link

3 :hoverSelect the element on which the mouse pointer is floating

4: activeSelect active link

5 :focusSelect the input field to get focus

##:first - child pseudo-class

Matches the first child element of the element.

    实例 php.cn    这里的文本是橙色的
 一些文本
 一些文本

:not pseudo-class

A negative pseudo-class used to match parameters that do not match the selection elements of the device.

    实例 php.cn    一些文本
 一些文本
 一些文本
 一些文本

:lang pseudo-class

:lang matches elements that set a specific language. Setting a specific language can be passed to the HTML element Set the lang="" attribute, set the charset="" attribute of the meta element, or set the language attribute on the http header.

    实例 php.cn    Lorem ipsum dolor sit amet. 
  Lorem ipsum dolor sit amet. 
  Lorem ipsum dolor sit amet.

##pseudo-element

::before/:before pseudo-element:before inserts content before the selected element. You need to use the content attribute to specify the content to be inserted. The content being inserted is not actually in the document tree.

    实例 php.cn   World

::after/:after pseudo-element:after inserts content after the element. Its usage and characteristics are similar to:before .

::first-letter/:first-letter pseudo-element

:first -letter matches the first letter of text in an element. The modified initial is not in the document tree.

    实例 php.cn   World 观察第一个字母

##::first-line/:first-line pseudo-element

:first-line matches the first line of text in the element. This pseudo-element can only be used in block elements, not inline elements.

实例 php.cn

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }， to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility， and we would advise that you stick with this syntax for the time being.

Continuing Learning