CSS class, Pseudo-class and pseudo-element differences

The class in CSS is designed to facilitate filtering (that is, selecting) elements to add styles to such elements, which are defined in the HTML document tree.

But this is not enough in some cases, such as the user's interaction (hover, activation, etc.) can cause the state of the element to change, class is powerless for these dynamic changes.

For this reason, CSS introduces the concept of Pseudo-class (Pseudo-class) to support the ability to filter elements based on information other than the document tree.

Pseudo-Class is an abstract class, essentially a class, so its main function is to select the element and then set the specific style.

The definition of a pseudo-class uses: a single colon plus a name , such as Mydiv:hover.

A pseudo-Class selection object may change as the user operates the document, such as when a user deletes certain nodes, affecting the selection of the child element (Nth-child) pseudo-class.

Pseudo-Class selection elements are based not on names, attributes, or content, but on characteristics (such as State or order). (: Except Lang)

Pseudo-elements (pseudo-element) are another concept designed with pseudo-class intent to support formatting based on information other than the document tree.

A pseudo-element is essentially an element, but it generally needs to be attached to an existing element as a "part" or "supplement" to that element. For example:: First-line or:: After.

The new pseudo-element syntax introduced in the CSS2.1 specification is a double colon::, but for compatibility with historical versions, some of the previously introduced pseudo-elements can still use the single colon syntax.

Unlike pseudo-classes used to filter elements , pseudo-elements are used to filter content or create supplemental content, wrap a virtual container outside of the content, and then apply a specific style.

We can apply pseudo-classes on pseudo-elements.

Here is an online example that can intuitively understand how they are used: http://wow.techbrood.com/fiddle/15719

To learn more about pseudo-classes, the use of pseudo-elements, instances, and differences.

Please refer to the reading online tutorial: http://techbrood.com/Guide/h5b2a?p=css-pseudo-elements

by Iefreer

CSS class, Pseudo-class and pseudo-element differences