Home > Developer > Web Develop
In addition to selecting elements based on the ID (#), Class (.), attributes ([]), the element selector for CSS has an important category, which is to select elements based on their special state. They are pseudo-classes and pseudo-elements. Unlike the ID selector, class selector, property selector, and derived selectors, and so on, these get elements from the HTML document hierarchy (DOM tree), the pseudo-class and pseudo-elements are predefined, independent of the document elements. The way they get the elements is not based on the element characteristics of the ID, class, attribute, but on the element that is in a special state (pseudo-Class), or the element's special content (pseudo-element). Of course, the representation of pseudo-and pseudo-elements is also distinguished using ":" (colon) with other selectors.
Pseudo classThe pseudo-class selection element is based on the state in which the current element is present, or the attributes that the element currently has, not the static flags of the element's ID, class, attributes, and so on. Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style. As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class.
: Link
Pseudo-classes will be applied to links that have not been accessed, with the: visited mutex.
: hover
The pseudo-class will be applied to the element that has the mouse pointer hovering over it.
: Active
The pseudo-class will be applied to the element being activated, such as the clicked Link, the button being pressed, and so on.
: Visited
Pseudo-classes will be applied to links that have already been visited, with: link mutex.
The following example shows a demonstration of the above 4 pseudo-class effects:
[HTML]View PlainCopyIt is important to note that in the definition of CSS, the same element: hover must be located in: Link,: Visited before it takes effect: active must be in: hover before it takes effect.
: Focus
The pseudo-class will be applied to the element that owns the keyboard input focus.
: First-child
The pseudo-class will be applied to the first occurrence of the element in the page.
: lang
The pseudo-class will be applied to the case with the specified lang for the element.
The following example shows the effect of the above 3 pseudo-classes:
[HTML]View PlainCopyUnlike pseudo-class elements that are specific to a particular state, a pseudo-element operates on a particular content in an element that operates at a level deeper than a pseudo-class, and therefore is much less dynamic than a pseudo-class. In fact, the purpose of designing pseudo-elements is to select the first word (mother), the first line of the element content, and select the work that the ordinary selector cannot do before or after some content. The content that it controls is actually the same as the element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element.
: First-letter
The style of the pseudo-element is applied to the first word (parent) of the element text.
: First-line
The style of the pseudo-element will be applied to the first line of the element text.
: Before
Adds new content to the front of the element's content.
: After
Adds new content to the last side of the element's content.
: Before and: After is usually used in conjunction with CSS content generation, the author will use in the next Article blog post.
CSS pseudo-class and pseudo-elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
