Characteristics and differences of pseudo-class and pseudo-elements in CSS3

Most of the front-end er are more or less exposed to CSS pseudo-class and pseudo-elements, such as the most common :focus , :hover as well as <a> tags :link , and visited so on, pseudo-elements more common such as :before , and :after so on.

In fact, the above mentioned pseudo-class and pseudo-elements are CSS1 and CSS2 concepts, CSS1 and CSS2 pseudo-class pseudo-elements of the difference between the fuzzy, and even often have peers :before , :after called Pseudo-class. CSS3 The concept of the two concepts relatively clear, and in the grammatical is also very obvious that the difference between them.

Pseudo class-Pseudo classes

First look at the definition of pseudo-class in CSS2:

CSS pseudo-classes are used to add special effects to certain selectors.

The definition alone is completely ignorant of what is being said. As of CSS2, there are several pseudo-classes (stealing a lazy, quoted from W3school):

Then there is the definition of the pseudo-class CSS3:

The Pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or That cannot is expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the Pseudo-class and optionally by a value between Parentheses.

Pseudo-classes is allowed in any sequences of simple selectors contained in a selector. Pseudo-classes is allowed anywhere in sequences of simple selectors, after the leading type selector or Universal Selecto R (possibly omitted). Pseudo-class names is case-insensitive. Some Pseudo-classes is mutually exclusive, while others can is applied simultaneously to the same element. Pseudo-classes May is dynamic, in the sense of that a element may acquire or lose a pseudo-class and a user interacts with The document.

Simple translation:

The meaning of pseudo-classes exists in order to find information that does not exist with the DOM tree and is not available to the regular CSS selectors through selectors.

A pseudo-class begins with a colon followed by the : name of the pseudo-class and an optional argument contained in parentheses.

Any regular selector can use pseudo-class anywhere. Pseudo-class syntax is not case-sensitive. Some pseudo-classes are mutually exclusive, and some pseudo-classes can be used by the same element at the same time. Also, pseudo-classes can be dynamic in order to meet the DOM structure changes that the user produces when manipulating the DOM.

In fact, the first paragraph contains all the definitions of CSS3 pseudo-class, this paragraph points out that there are two functions of CSS3 pseudo-class:

1. Gets the information that does not exist with the DOM tree. such as <a> tags :link , and visited so on, this information does not exist with the DOM tree structure, only through the CSS selector to obtain;
2. Gets the information that cannot be obtained by the regular CSS selector. For example, pseudo-class :target , its role is to match the document (page) URI of a target element of a marker, for instance, we can use the following code to achieve the area within the page jump:

<Ul class="Tabs"><Li><A href="#tab1"> Label One</A></Li><Li><A href="#tab2"> Label II</A></Li><Li><A href="#tab3"> Label Three</A></Li></Ul><Div Id="Tab1" class="Tab_content"><!--tabed content--></Div><Div Id="TaB2" class= "tab_content" ><!--tabed content--></ Div><div id= "Tab3"  class=  "tab_content" >< Span class= "CO" ><!--tabed content--> </DIV>            

The CSS code is as follows:

. tab_content{Height800pxbackground: redmargin-bottom: 100px< span class= "KW"; } #tab1 :target,  #tab2 :target,  #tab3 :target {background : blue;}            

Of course, using JavaScript to get the window.location.hash same results in the previous example, but that's another matter. In a word, the :target logic of conventional CSS cannot be realized through CSS .

In contrast, the definition of pseudo-class in CSS2 is reasonable, but it does not point out that "some selectors" are "which selectors", CSS3 the definition of pseudo-class is very clear.

To raise a chestnut, :nth-child() some very interesting effects can be achieved by pseudo-class, such as:

TableTr: Nth-child(2n)Td{Background-color:#ccc;}TableTr:nth-child (2n+1) td{background-color: span class= "DT" > #fff ;} table tr:nth-child (2n+1) :nth-child (5n) td{background-color:  #f0f ;            

The above code sets all the even line background colors to the #ccc odd line that cannot be divisible by 5 to set the background color #fff , which can be set to the odd line divisible by 5 #f0f .

It would be a lot more complicated to use JavaScript instead of pseudo-classes to achieve the above effects.

You can conclude that :nth-child() the effect of a pseudo-class is to filter the elements that are filtered by the regular CSS selector in accordance with established rules.

CSS3 also introduces many new pseudo-classes, which interested readers can refer to here.

Pseudo element-pseudo-elements

The definition of pseudo-elements in CSS2:

CSS pseudo-elements are used to set special effects to certain selectors.

Well, it's exactly the same as the definition of pseudo-class. There is wood (spit a w3school translation). In fact, people like this translation is not wrong, originally CSS2 to pseudo-class and pseudo-element definition is exactly the same:

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outs IDE the document tree.

As of CSS2, there are several pseudo-elements:

Then look at the definition of pseudo-elements in CSS3:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages don't offer mechanisms to access the first letter or first line of a element ' s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a by-refer to content-does not exist in the source document (e.g., the: : Before and:: After pseudo-elements give access to generated content).

A Pseudo-element is made of both colons (::) followed by the name of the pseudo-element.

This:: Notation are introduced by the current document in order to establish a discrimination between pseudo-classes and P Seudo-elements. For compatibility with existing style sheets, user agents must also accept the previous One-colon notation for Pseudo-elem Ents introduced in CSS levels 1 and 2 (namely,: First-line,: First-letter,: Before And:after). This compatibility isn't allowed for the new pseudo-elements introduced in this specification.

Only one pseudo-element could appear per selector, and if present it must appear after the sequence of simple selectors that Represents the subjects of the selector.

NOTE:A Future version of this specification may allow multiple pseudo-elements per selector.

Simple translation:

Pseudo-Elements create abstract elements in the DOM tree that do not exist in the document language (which can be understood as HTML source code). For example: The Documen interface does not provide a mechanism to access the first word or the first line of the element's content, and pseudo-elements can enable the developer to extract the information. Also, some pseudo-elements can enable developers to obtain content that does not exist in the source document (for example ::before , Common ::after ).

The pseudo-element begins with a two colon :: , and then the name of the pseudo-element.

Two colons are used :: to distinguish between pseudo-classes and pseudo-elements (there is no difference in CSS2). Of course, given compatibility, the existing pseudo-elements in CSS2 can still use a colon : syntax, but the new pseudo-elements in CSS3 must use two colons :: .

A selector can only use one pseudo-element, and the pseudo-element must be at the end of the selector statement.

Note: It is not ruled out that future joins a mechanism that uses multiple pseudo-elements simultaneously.

Similarly, the first paragraph is a clear definition of pseudo-elements and is the biggest difference between pseudo-elements and pseudo-classes. Simply put, a pseudo-element creates a virtual container that contains no DOM elements, but can contain content. In addition, developers can customize styles for pseudo-elements.

::first-lineas an example, it gets the first line of content for the specified element and joins the contents of the first row into the virtual container. If you use JavaScript to implement this logic, then there are too many factors to consider, such as the width of the elements, font size, and even the floating elements of the text and so on. Of course, these problems can be solved with JavaScript, but ::first-line with a few simple words, JavaScript is probably more than that!

For a comprehensive use of pseudo-class and pseudo-elemental chestnuts:

Q: lang (DE):: after{Content"(German)";}q:lang (en) ::after{content: q:lang (FR) ::after{content: q:not (: Lang (FR)) :not (:lang (DE)) :not (:lang (en)) : after{content:  "(unrecognized language)";}     

The above code "lang obtains nodes of different attributes through pseudo-classes, lang and sets pseudo-elements for them, and the ::after content of pseudo-elements is the language type of this node.

Finally, we summarize the characteristics and differences between pseudo-class and pseudo-elements:

1. Pseudo-class is essentially to compensate for the shortcomings of the conventional CSS selectors in order to obtain more information;
2. The pseudo-element essentially creates a virtual container with content;
3. The syntax of pseudo-class and pseudo-element in CSS3 is different;
4. You can use multiple pseudo-classes at the same time, but only one pseudo-element at a time;

Characteristics and differences of pseudo-class and pseudo-elements in CSS3