Running through some test preparation, I was asked if this would set the first letter color correctly:
td.one::first-letter {
color:blue;
}
Now, I know I've seen places where the colon is doubled-up on, but a test jsFiddle doesn't show any difference in behavior between that and
td.two:first-letter {
color:green;
}
So, I'm just curious what the difference is, and why you would use :: instead of : in front of the pseudo-class?
http://jsfiddle.net/mori57/bqE7Q/
Checked the spec?
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.
http://www.w3.org/TR/selectors/#pseudo-elements
They're equivalent in this case, but only because it's a pseudo-element, not a pseudo-class. The double-colon syntax was created in order to prevent the confusion arising from calling single-colon pseudo-elements "pseudo-classes" (which your question demonstrates, oddly enough). From the spec:
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.
If you're not planning on supporting IE < 9, it is best to denote all your pseudo-elements with double colons going forward. If you require support for older versions of IE, you can continue using single colons, but only for the aforementioned selectors.
Related
I'm new to CSS, and I was wondering, is there another way to write an equivalent to pseudo class :link , in case :link is not supported?
Theoretically, in selectors-4 you can write :any-link:not(:visited), but you are going to be hard-pressed to find any browsers that support :visited but not :link, let alone :any-link, browser regressions notwithstanding.
A slightly more widely-supported selector requires knowledge of the document language since the link pseudo-classes themselves match different elements based on document semantics. In HTML, :link can be expressed as the following level 3 selector-list:
a[href]:not(:visited), area[href]:not(:visited), link[href]:not(:visited)
The same caveat applies.
If you're asking about browsers that support neither of the link pseudo-classes, remove the :not(:visited) from the above selector-list. If you're asking how to match links based on their visitedness in browsers that support neither pseudo-class, then it becomes impossible. But there are no known browsers that lack support for the link pseudo-classes, so this will never be a problem if you're making websites.
Note that CSS1 and CSS2.1 define :link and :visited to apply only to a elements — the standalone Selectors standard (level 3 and up) instead defers to the document language, and in the case of HTML, the current definition above is provided by HTML5. What this means in theory is that browsers up to and including IE6 (not sure about IE7) don't support the link pseudo-classes on elements other than a[href], and that's because IE6 was designed to be CSS1-compliant, not CSS2-compliant.
What this means in practice depends on whether or not you use the link pseudo-classes to match area or link elements, and whether or not you support browsers dating back to IE7, in the first place. If you're like 99.9% of authors who don't use them with area or link elements, then this means absolutely nothing to you in practice.
The a {} selector ({} added since it's so short) will apply to all pseudo classes though a:link will override specific styling for URLs the user has not yet visited.
Someone mentioned an exceptionally old version of Internet Explorer. If you're new to CSS you should first concentrate on current browsers. If you're learning at this point the oldest version of IE that you'll be supporting is IE11 if working with CSS will become a part of your future career.
From MDN:
The :: notation was introduced in CSS 3 in order to establish a
discrimination between pseudo-classes and pseudo-elements. Browsers
also accept the notation : introduced in CSS 2.
If the notation : will always be accepted by CSS3 browsers, should I use it because it works on old and new browsers?
Or should I use both of them, : for old browsers and :: for new ones, because the notation : won't be always accepted?
Note: I think my question isn't a duplicate isn't a duplicate of Should I use single or double colon notation for pseudo-elements? because the other question asks about single vs double notation for ALL pseudo-elements; while my question is only about pseudo-elements defined in CSS2, not the new ones defined in CSS3, because I already know that with those I must use ::.
For what it's worth, Selectors 4 now explicitly instructs1 authors to use double colons for all pseudo-elements, including CSS1 and CSS2 pseudo-elements, going forward (emphasis mine):
Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.
This means that the only appropriate use of the single-colon syntax today is if you absolutely require legacy browser support — the only browser that matters here is IE8 and older. If you don't, you should use the double-colon syntax for the sake of consistency with newer pseudo-elements which will only accept double colons. Besides, it's quite pointless to use the single-colon syntax if, for instance, you're going to apply properties that aren't supported by IE8 anyway, such as border-radius or box-shadow, to your ::before and ::after pseudo-elements.
I'd like to believe that Selectors 3 at the very least implied this in its statement that the single-colon syntax does not apply to any newer pseudo-elements, but having this sort of thing stated in black and white never hurt anybody and it's good to know that the upcoming standard does just that.
Also, there is absolutely no reason to write duplicate rules with both notations in the same stylesheet (e.g. :before, :after { ... } ::before, ::after { ... }), as no browser in existence supports the new syntax without supporting the older one.
1 I say this fully aware that it probably didn't state this yet at the time this question was asked — the May 2013 WD certainly did not.
As I mentioned in this comment previously - http://css-tricks.com/html5-progress-element/#comment-533395
Short Answer – Use single colon notation :
Long Answer – There’s no real difference between :before and ::before, or between :after and ::after. But since the older browsers use a single colon notation, so using : is always a safer bet. Read this spec defined by W3C on pseudo elements which states that,
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 CSS level 3.
I would would go for the single :
People now a days should at least have somewhat of the latest browsers installed, so you have nothing to worry about.
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?
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
::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."
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.
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.
Since IE7 and IE8 don't support the double-colon notation for pseudo-elements (e.g. ::after or ::first-letter), and since modern browsers support the single-colon notation (e.g. :after) for backwards compatibility, should I use solely the single-colon notation and when IE8's market share drops to a negligible level go back and find/replace in my code base? Or should I include both:
.foo:after,
.foo::after { /*styles*/ }
Using double alone seems silly if I care about IE8 users (the poor dears).
Do not use both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user agent will ignore the whole rule:
When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
You could however use
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
On the other hand this is more verbose than necessary; for now, you can stick with the one-colon notation.
From CSS3 Selectors REC:
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.
It seems you're safe using (only) one-colon notation for pseudo-elements that already existed in CSS2.1 as UAs must be backward compatible.
I absolutely disagree with #mddw and #FelipeAls, in regards to considering the use of one colon "safe".
This "I'll use it even though it's deprecated" mentality is exactly why browser-based technologies are so slow at advancing and progressing forward.
YES, we want to maintain compatibility with old standards. Let's face it, it's the hand we've been dealt. BUT, this does not mean you have an excuse to be lazy in your development, by ignoring current standards in favor of deprecated ones.
Out goal should be to maintain compliance with current standards, while supporting as much of the legacy standard as possible.
If pseudo-elements use : in CSS2 and :: in CSS3, we should not be using one or the other; we should be using both.
To fully answer the original question asked, the following is the most appropriate method of supporting the most current implementation of CSS (version 3), while retaining legacy support for version 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
However, it's become increasingly popular to use polyfills for both new javascript and CSS, so you might just want to stick with using the newer double-colon (::) syntax, and maintain a polyfill for older browsers, so long as that is necessary.
For what it's worth according to Browser Stats IE 8.0 has dropped to less than 1% in the USA over the past year.
http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612
In December 2015 IE 8.0 had 2.92% of the market.
In December 2016 IE 8.0 had .77% of the market.
At that rate of decline it wouldn't be the worst idea to stop supporting old versions of IE and start using :: for Pseudo Elements.
Including both notations is certainly safer, but I can't see any browser dropping the single notation for a long time, so only a single one'll be fine (it's valid CSS2.)
Personnaly I only use the single colon notation, mostly by habit.
Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification?
It's pseudo-class vs pseudo-element distinction.
Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.
Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and :focus.)
Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.
Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSS Selectors like ::after are some virtual elements not available as a explicit element in DOM tree. They are called "Pseudo-Elements" and are used to insert some content before/after an element (eg: ::before, ::after) or, select some part of an element (eg: ::first-letter). Currently there is only 5 standard pseudo elements: after, before, first-letter, first-line, selection.
On the other hand, there are other types of selectors called "Pseudo-Classes" which are used to define a special state of an element (like as :hover, :focus, :nth-child(n)). These will select whole of an existing element in DOM. Pseudo classes are a long list with more than 30 items.
Initially (in CSS2 and CSS1), The single-colon syntax was used for both pseudo-classes and pseudo-elements. But, in CSS3 the :: syntax replaced the : notation for pseudo-elements to better distinguish of them.
For backward compatibility, the old single-colon syntax is acceptable for pseudo-elements like as :after (browsers still all support the old syntax with one semicolon). Only IE-8 doesn’t support the new syntax (use single-colon if you want to support IE8).