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.
Related
Given any CSS with a selector like:
.class-xyz:not(.class-xyz) {
...
}
Is it possible that it ever matches any element?
What about augmenting it with things like ::after, ::placeholder and so on?
My intent is to simplify a bunch of huge CSS sheets, with lots of selectors like this.
That selector will not match any element, regardless of namespace (since, even with namespaces present, the outside .class-xyz represents the default namespace, and the one inside the negation always considers the same namespace as the outside selector).
Since that selector will not match any element, it follows that no pseudo-element will be matched. For a pseudo-element to apply, elements need to be matched in the first place.
If you wish to hide a CSS rule without outright deleting the rule or tampering with the original portion of the selector, a shorter way to do so using the negation pseudo-class would be :not(*) (or, if namespaces are present, :not(*|*)). This use case is explicitly given in the level 3 and 4 specs.
But the shortest and clearest way to hide a CSS rule by far is to comment it out.
I have seen a line of code in CSS looks like this:
[icon]:not([focused]):not([pressed]):not([disabled]){ background-position-y:-0px; }
What is the meaning of the multiple colons in this case? Are they still Pseudo selectors?
It's not pseudo-selectors - it's selectors for pseudo-classes. Quoting the W3C Selectors Level 3 doc:
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument. [...]
The following selector matches all button elements in an HTML document
that are not disabled.
button:not([DISABLED])
The following group of selectors represents all HTML elements except links.
html|*:not(:link):not(:visited)
The last example (as well as this answer) shows that it's quite valid to use a chain of several :not pseudo-class selectors, if what you want is setting a rule for some element that is not either of several mentioned types.
In your case the selector catches all the elements with icon attribute set (to any value) - except those that have either focused, pressed or disabled set (again, to any value) as well.
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).
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.