This question already has answers here:
:not() selector not behaving the same between Safari and Chrome/Firefox
(2 answers)
Closed 6 years ago.
I've been using the :not() pseudo-class to style things without the need to override it with a second unnecessary declaration to undo the first one,
but now I came across a weird behaviour where Safari accepts descendant selectors within the :not(), but Chrome doesn't.
I used something like a:not(.blue a).
I searched for answers, but I still don't fully understand the reason.
Are descendant selectors really allowed by the spec?
Here's a demo:
a:not(.blue a) {
color: red;
}
<div><a>this one should be in red</a></div>
<div class="blue"><a>this one shouldn't</a></div>
http://codepen.io/oscarmarcelo/pen/YqboQJ?editors=1100
In Selectors Level 3, the answer would be NO. The :not() notation accepts only simple selectors.
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.
What is a simple selector?
From selector syntax:
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
Nothing about a descendant selector.
HOWEVER, in Selectors Level 4, :not() accepts complex selectors, which would include descendant combinators. Browser support is still quite weak for this specification.
Related
MDN in this link talks about using adjacent sibling combinator and the specs. talk about combinators too but they never call the two selectors combined by the adjacent combinator a selector. People commonly call the result of the adjacent combinator an adjacent selector, is that informal use of the term?
The terms "child selector" and "adjacent sibling selector" were old terminology used by the CSS2 spec when "selector" was a much looser term (it still is, but they use it more consistently now). It's related to "contextual selector" which is what CSS1 called selectors that used the descendant combinator. CSS2 introduced the term "combinator" to refer to the symbols themselves, but combinators themselves technically aren't selectors because they don't select anything on their own; instead, they indicate relationships between two (or more) selectors. MDN is not really correct in calling combinators selectors, but then again, it's all just semantics.
To answer your question, yes, "adjacent sibling selector" is an informal term. You can probably get away with using it even today, as it's easier to say by far than something like "a pair of compound selectors with the adjacent sibling combinator". Selectors 4 uses the much clearer and unambiguous name "next-sibling combinator" by the way.
To put it into examples:
+ is the adjacent sibling combinator (next-sibling combinator in Selectors 4), and
E + F is an adjacent sibling selector (next-sibling selector) matching any F that directly follows an E.
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"] {
...
}
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 correct term for the sections of CSS selectors that are separated by commas?
body.foo .login , body.bar .login { ... }
/* |
Part 1 | Part 2 */
Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?
body.foo .login , ... { ... }
/* |
Part 1 | Part 2 */
What is the correct term for the sections of CSS selectors that are separated by commas?
These are called complex selectors. The entire comma-separated list is known as a selector-list.
Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?
These are known as compound selectors.
So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.
Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.
And since I'm here, here are the rest of the definitions...
A simple selector is one fundamental component of selectors. It is any one of the following:
Universal selector (*), optionally with a namespace
Type selector (a, div, span, ul, li, etc), optionally with a namespace
Attribute selector ([att], [att=val], etc), optionally with a namespace
Class selector (.class)
ID selector (#id)
Pseudo-class (:pseudo-class)
As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:
a:not([rel="external"]):hover
A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:
Descendant combinator:
article p
Child combinator:
/*
* The extra spaces in between are whitespace,
* and are therefore insignificant.
*/
ul > li
Adjacent sibling combinator:
header + section
General sibling combinator:
h2 ~ p
More combinators may be introduced in later specifications.
And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:
nav[role="main"] > ul:first-child > li
The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is li.
The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:
Simple selector
Compound selector
Complex selector
Selector-list (e.g. the "selector" component of a style rule)
Some personal notes:
The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.
The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.
Pseudo-elements (::pseudo-element) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).
In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.
Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.
The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.
Specificity will be a more complicated issue with some level 4 selectors, such as :is() and the enhanced :not(), and the of S notation in the enhanced :nth-child() pseudo.
The specification offers terminology for this:
A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
Combinators are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.
There are some small terminology differences between CSS 2 and 3
the list of basic definitions (selector, group of selectors, simple selector, etc.) has been changed; in particular, what was referred to in CSS2 as a simple selector is now called a sequence of simple selectors, and the term "simple selector" is now used for the components of this sequence
The parts separated by commas are called selectors.
Within a selector we have simple_selectors and combinators.
See the grammar.
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.