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?
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,:beforeand: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.