CSS pseudo-class pseudo-elements

Source: Internet
Author: User

Before writing a "detailed CSS properties-: Before &&: After" blog, then I did not distinguish between pseudo-elements and pseudo-class, so in the article to confuse the concept, fortunately @riophae brother corrected my mistake, so today intends to study the difference between the two.
First, read the w3c definition of both:

  • CSSPseudo-classes are used to add special effects to certain selectors.
  • CSSPseudo-elements are used to add special effects to certain selectors.

Can be clear two points, the first two are related to selectors, the second is to add some "special" effect. The special point here is that the two describe css something else that cannot be described.

Pseudo-Class types

Pseudo-element type--content as a style, not meaningful, just for the sake of good-looking content

Difference

This :first-child is compared by pseudo-class and pseudo :first-letter -elements.

P>i:first-child {color:red}<p><i>First</i><i>Second</i></P>

Pseudo-Class :first-child adds a style to the first child element
If we do not use pseudo-classes and want to achieve the above effects, we can do this:

. first-child {color:red}<p><i class="First-child">First</i><i>Second</i></P>

That is, we add a class to the first child element and then define the style of the class. So let's take a look at the element:

p:first-letter {color:red}<p ;  I am Stephen Lee. </p ;  

Pseudo elements :first-letter add style to first letter
So if we do not use pseudo-elements, to achieve the above effect, what should be done?

. first-letter {color:red}<p><span class=' First-letter '>I</span>Am Stephen Lee.</P>

that is, we add a  span , then give  span   Add style.

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

Summarize

pseudo-elements and pseudo-classes are so easily confused because they are similar in effect and written in the same way, but actually  CSS3   In order to differentiate between the two, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons.

:Pseudo-classes::Pseudo-elements

But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.


Source: 1190000000484493

From for notes (Wiz)

CSS pseudo-class pseudo-elements

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.