This is a bit of a pedantic question, but perhaps worth asking. Is there, mechanically, a difference between a pseudo-class and a pseudo-selector in CSS? We use the term interchangeably around here, but it seems that there's a reason for the two terms. Is there any use to differentiating the two?
A pseudo-class is a specified thing, while pseudo-selector is a made up word.
(Meanwhile, a pseudo-class matches an element when certain conditions are met (e.g. the mouse is pointing at it, or it is the first child of its parent), while a pseudo-element is something that can be matched but isn't a real or whole element, such as "Thing before an element" or "First line of text in an element".)
pseudo-selector does make the odd appearance on the W3C site, but my initial search suggests that it is an old old term that has now been replaced with pseudo-class:
pseudo-selector
the page pseudo-selector :first
http://www.w3.org/TR/2004/CR-css-print-20040225/#section-selectors
CSS has a "lang" pseudo-selector that automatically uses the appropriate attribute depending on the media type
http://www.w3.org/TR/xhtml-media-types/
pseudo-class
5.11.4 The language pseudo-class: :lang
http://www.w3.org/TR/CSS2/selector.html#lang
...and many more.
Pseudo-elements and pseudo-classes
Then there's the descriptions for pseudo-elements and pseudo-classes:
http://www.w3.org/TR/CSS2/selector.html#pseudo-elements
So it looks to me as though pseudo-selectors are no longer in vogue...
a pseudo-class is the actual psuedo element, such as :hover, :active, etc..
a pseudo-selector is the complete selector that contains/uses a pseudo-class. such as a:hover, a:active
but pseudo-class is what people should be saying/typing. pseudo-selector I think came from people knowing there was 'pseudo' and 'selectors' so 'why the hell not put them together?' kind of thing.
Related
pseudo-elements are like virtual elements, however it seems to me that many of them are more like classes than elements.
eg. ::PLACEHOLDER ::SELECTION ::FIRST-LINE ::FIRST-LETTER ::BACKDROP
Can someone explain to me how these are considered elements and not classes? They aren't creating any new elements, they are just applying a class in certain circumstances.
Pseudo-classes target an existing element when the state of it matches a condition.
You can target a and a:visited and they will match exactly the same "thing" when it is in the visited state.
Pseudo-elements target something that isn't an element in its own right. The :first-line of an element isn't event a complete DOM node.
This question already has answers here:
Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
(3 answers)
Closed 7 years ago.
Somehow I am curious, why CSS create two ways for accessing attribute, I know for selector most of us use :hover, :visited, etc. But there are selectors that can be access using attribute selector, e.g: :disable, :readonly, etc.
Is there any benefit using selector instead of attr selector?
Thanks before :)
It is a little unclear exactly what you mean, but this Mozilla article might be informative:
Writing Efficient CSS (MDN)
It has a nice overview of the selector types, when they are useful, and general performance of the selector.
Note that this article is way out of date, but in general selectors based on ID are very efficient and ones based on attributes are less efficient (though many would argue that worrying about efficiency of your css selectors is quite a premature optimization).
But in general, there are different types of selectors for different situations, depending on the structure of your page.
Also, :hover and :visited aren't attribute selectors, they are "pseudo-class" selectors.
:hover would apply to most elements, :visited would only apply to hyperlinks, :readonly would only apply to input boxes...
In CSS terms, an "attribute selector" is one that would select elements based on an HTML attribute. For example this attribute selector would match this element:
<input type="text" name="some-data" />
[type="text"] {
...
}
Chained pseudo-selectors do not seem to work in IE8 on Windows XP. Is there any documentation about this?
I'm developing a website using Selectivizr in order to use CSS3 selectors, but a style such as this doesn't work in IE8, whereas it works everywhere else (unsurprisingly):
span:last-child:after {content: "foobar";}
This is not a bug, it's due to the fact the the selector doesn't match natively.
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
The simple selector in this case is either span:first-child, which matches natively in IE8, or span:last-child, which does not.
One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.
Appending :after to span:first-child is a match, while appending it to span:last-child is not, and since Selectivizr is a post-processor, it comes too late to save the day. Perhaps a pre-processor would have better luck.
What is the difference between a and a:link, and when do I use one over the other?
a:link is specifically for links that have not been visited. a applies to all <a> elements.
John Conde’s answer and comments to it describe well the meanings of the selectors, but to address the question as asked I think we need to add these:
The selector a:link is more specific than a. This is evident when you think about it, but it might be missed when considering the effects of several CSS rules that apply to an element.
If you want to set properties on links in general (e.g., the font face of links), using a is simplest if you can ensure that a elements without href attributes do not appear. (It has been common to set destinations for links using a elements with a name attribute, normally without an href attribute; the more modern approach is to use the id attribute on any suitable element.)
But in most cases, it is best to use both :link and :visited, to avoid the risk of styling a elements that are not links. You would then use :link, :visited {...} to set properties for all links and :link {...} and :visited {...} to set properties for unvisited links and for visited links separately (typically, different colors for them).
The difference between :link and a:link, apart from specificity, is that :link covers elements that are classified as links. Although currently only a elements can create links, this might change in a future version of HTML.
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).