CODEWITHSUNDEEP
csscss-selectors
user2324818
user2324818

Reputation:

What's difference between this two selectors?

I see two different style of define pseudo element like this:

#div::after { content: ''; display: block; }
#div:after { content: ''; display: block; }

What's the difference between them and what way should I used?

Upvotes: 2

Views: 123

Answers (4)

SLaks
SLaks

Reputation: 887275

They both do the same thing.

::after is more logical, but it isn't supported by older IEs

In general, :whatever is a pseudo-class – it filters the selector it's appended to to only match sometimes (eg, when hovered, or when invalid).

::whatever is a pseudo-element – it refers to a new virtual element related to the selector it's appended to; an element that does not actually exist in source (eg, a scrollbar).

before and after are logically pseudo-elements, but they were introduced before the :: syntax existed.

Upvotes: 1

Adrift
Adrift

Reputation: 59769

::after is the CSS 3 notation. This is recommended for use according to the Selectors Level 3 Module. The only issue with using the newer syntax is that you will run into IE7/8 compatibility problems

The point is also to distinguish pseudo-elements from pseudo-classes (which only use a single colon)

From Selectors Level 3:

"This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification."

Upvotes: 2

Timidfriendly
Timidfriendly

Reputation: 3284

The :: designates that the psuedo used is targeting an additional dynamically created element is and not a restyling of an existing element. But because of backwards compatibility both the single and double colon are supported by browser vendors meaning in real terms they achieve the same results in modern browsers.

Upvotes: 0

Eli
Eli

Reputation: 14827

This distinguishes pseudo elements from pseudo classes. but actually they're the same except that the single colon : is used for CSS2 syntax when the double colon :: is introduced in CSS3. So if your concern is about browser compatibility, you should stick with :after

Upvotes: 3

Related Questions