I have the following CSS:
div.section:not(div.cover) > div { ... }
And the validator says:
Parse Error [div.cover) > div]
Why doesn't it validate (not working in browsers either)? Is > not allowed after a pseudo-class, or what could be the issue?
You cannot combine a type selector (div) and a class selector (.cover) in the negation pseudo-class :not(), as pointed out by #DanPrince in the comments.
The negation pseudo-class must contain a simple selector:
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
Issue is (div.cover). You need to give a simple selector e.g. (.cover)
Related
In CSS, is this selector:
div:first-of-type[label="hello"]
any different from:
div[label="hello"]:first-of-type
?
Unlike pseudo element, pseudo classes can appear in the middle of a selector:
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). ref
So both are the same
div[label="hello"]:first-of-type {
height:50px;
}
div:first-of-type[label="hello"] {
border:5px solid;
}
<div label="hello" class="box"></div>
Considering the new specification:
Like other simple selectors, pseudo-classes are allowed in all compound selectors contained in a selector, and must follow the type selector or universal selector, if present.
Worth to note that :first-of-type will only consider the element and its sibling. So the first selector will not select the first div having label=hello but the first div if it has the label=hello.
In other words, the 2 conditions must be true to select the element that's why the order doesn't matter and both selectors are the same.
You can see both selectors like below:
div[label="hello"]:first-of-type
(div) && (label="hello") && (first of type)
(div) && (first of type) && (label="hello")
div:first-of-type[label="hello"]
Related: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
This is a selector used to match routerLink directive.
I know that :not(a) matches any element which is not an a element, but what does [routerLink] part mean?
In your code -- :not(a)[routerLink] -- you're saying: select all elements, except anchors, that contain the routerLink attribute.
The brackets ([]) represent an attribute selector.
<div class="somevalue">
You can target the element above like this:
[class] { background-color: red; }
It matches all elements with a class attribute.
Have a look at this table for more details:
https://www.w3.org/TR/css3-selectors/#selectors
With thanks to #BoltClock for distinguishing between two selectors that look alike, but are different:
:not(a)[routerLink]) will never match a elements
:not(a[routerLink]) will match a elements that don't have the attribute. (Note that compound selectors in the :not() pseudo-class are available as of Selectors 4.)
According to W3C, the definition of a selector does not cover a pseudo-element:
https://www.w3.org/TR/css3-selectors/#selector-syntax
The above link says:
A selector is a chain of one or more sequences of simple selectors
separated by combinators.
and it also says:
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
Regarding how a pseudo-element should be used, it says:
One pseudo-element may be appended to the last sequence of simple
selectors in a selector.
and
Only one pseudo-element may appear per selector, and if present it
must appear after the sequence of simple selectors that represents the
subjects of the selector.
So does that mean that a pseudo-element can only be a suffix to a "valid" selector and should not be used alone?
does that mean that a pseudo-element can only be a suffix to a "valid"
selector and should not be used alone?
Your conclusion is not true, because the universal selector * can be omitted.
If a universal selector represented by * [...] is immediately
followed by a pseudo-element, then the * may be omitted and the
universal selector's presence implied.
So you can use a pseudo-element alone, e.g. ::before, because under the hood it will be treated like *::before.
::before {
content: 'Hello!';
}
I am trying the :not pseudoclass selector, I want everything on the page to have color blue except the childs of a div which class="pag", so I wrote:
:not(.pag > p){
color:blue;
}
<div class="pag">
<p>First</p>
<p>Second</p>
<p>Thirt</p>
<article>Blah blah blah</article>
</div>
but it doesnt seem to work. Can somebody explain me why?
http://jsfiddle.net/Rc9pT/
It works fine if you simplify the selector:
.pag > :not(p){
color:blue;
}
JS Fiddle demo.
Albeit this 'works fine' only with the caveat that you have to specify a selector, with this approach, for every parent-child relationship; which may become burdensome.
I suspect that it's the simplicity that's required:
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.
A 'simple selector' is defined as:
either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
This seems to imply that any selector incorporating combinators (such as white-space, >, + or ~, among others) is not 'simple', unfortunately.
References:
Negation (:not()) pseudo-class.
Simple selector definition.
This CSS selector picks up elements without a class attribute:
a:not([class])
This CSS selector picks up elements without an id attribute:
a:not([id])
But what is the syntax for a CSS selector picks up elements that have no id and no class?
I tried the following:
a:not([class][id])
But what it did is pick up elements that have no id or have no class.
How about
a:not([class]):not([id])
FIDDLE