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.)
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?
What CSS selector is the first part in square brackets?
[ui-view].ng-enter-active {}
It is not an attribute selector that would be this right?
ui-view[content] {}
It is indeed an attribute selector. An attribute selector and a class selector are both simple selectors, and simple selectors in a sequence may be arranged in any order, with the exception that a type or universal selector, if present, must come first.
This means [ui-view].ng-enter-active and .ng-enter-active[ui-view] are both valid and equivalent, matching an element that has a class "ng-enter-active" as well as an attribute named "ui-view". The former seems strange at first only because you rarely see attribute selectors appearing first in a simple selector sequence.
Your second example, ui-view[content], contains a type selector, ui-view. Because of this, unlike your first example, it cannot be rewritten as [content]ui-view, since, as mentioned, type selectors must come first.
That is an attribute selector. It would select an element that has both a ui-view attribute as well as the class ng-enter-active. That attribute selector doesn't care about the actual value of the attribute. So for example, it would correctly select the following:
<div ui-view class="ng-enter-active"></div>
as well as:
<div ui-view="valueDoesntMatter" class="ng-enter-active"></div>
It's attribute selector, so:
The first one
[ui-view].ng-enter-active
means element with class ng-enter-active and attribute ui-view, eg.
<div class="ng-enter-active" ui-view="abc">
<div class="ng-enter-active" ui-view> <!-- or with attribute without value -->
The second one,
ui-view[content]
means element ui-view (you probably forgot dot, class="ui-view") with attribute content
<ui-view content="abc">
OR probably, if you forgot . in selector
<div class="ui-view" content="whatever">
See more about attribute selector: http://quirksmode.org/css/selectors/selector_attribute.html
Why do we need the CSS [attribute|=value] Selector at all when the CSS3 [attribute*=value] Selector basically accomplishes the same thing, the browser compatibility is nearly similar? Is there something that the first CSS selector does and the second isn't able to? This is the first time to encounter two very similar selectors and wonder why the first one exists in the first place.
From the doc:
[attr|=value] Represents an element with an attribute name of attr.
Its value can be exactly “value” or can begin with “value” immediately
followed by “-” (U+002D). It can be used for language subcode matches.
[attr*=value] Represents an element with an attribute name of attr and
whose value contains at least one occurrence of string "value" as
substring.
Visual differences:
[attr|=value]
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}
<span lang='zh'>zh</span>
[attr*=value]
/* All links to with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;}
<a href="www.example.com">example<a/>
In the same code example:
div[color|="red"] {
background: red;
}
div[color*="blue"] {
color: blue;
}
<div>
<div color='red-yellow'>This shoud has only red background</div>
<div color='blue'>This shoud has only blue color</div>
<div color='red-blue'>This shoud has blue color and red background</div>
<div color='blue-red'>This shoud be only blue color</div>
</div>
References
Attribute selectors
There are a lot of differences between these two selectors
[lang|=en] {
background: yellow;
}
[lang*=en] {
color:red;
}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="usen">Hi!</p>
<p lang="noen">Hei!</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.
The [attribute*=value] selector matches every element whose attribute value containing a specified value.
See the example to get a clear idea about both the selectors.
They are distinctly different:
[attr|=value]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
The first selector ensures the attribute value starts with the value submitted, the second only requires the attribute value contains it.
This would be helpful if you had to distinguish between attributes that had the same string in different positions within the same attribute.
CSS has evolved over time, and as it has evolved the need and want for more selectors, and functions has increased.
The CSS [attribute|=value] Selector was defined before CSS3 (latest version), and was available in CSS 2.1. As noted in the page you linked to:
used to select elements with the specified attribute starting with the specified value.
Whilst this is handy in most cases, sometimes there are frameworks, which come with structured css in the from of someString_somethingUseful_somethingElse for its class definition.
Now say I wanted to select all elements with the somethingUseful bit in it. The above selector would not allow me to do this, as the somethingUseful bit of the class definitions located in the middle of the class name. the same with the somethingElse bit, it is located at the end.
Thus in CSS3, we saw the introduction of [attribute*=value] selector which allows us to select elements which may have these keywords as a substring in their definition (though not necessarily at the front) See:
selector matches every element whose attribute value containing a specified value.
first post here, apologies if I did something wrong, but I came across this...
#page ul[id^=subnav] { margin-bottom: 0; }
in a css style sheet, whats does the ^= do and is it practical to use? Thanks for any info.
W3.org - Selectors Level 3 - 6.3.2. Substring matching attribute selectors
[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
In this case, the selector is looking for an element with an id of page, whose descendant ul element has an id beginning with the string "subnav".
From MDN docs about attribute selectors:
[attr^=value] Represents an element with an attribute name of attr and
whose value is prefixed by "value".
so basically your selector will match any <ul> elements whose stayed inside #page with an id value starting with subnav such as <ul id="subnav1">,<ul id="subnav2">....
I have an example of what I'm trying to ask.
I use this kind of format often. I'd expect to be able to select that first div with fieldset div:first-child { } but it seems that it's only grabbed by the 2nd child selector. I would expect "field 1" to be red and not blue. It makes more sense semantically (to me at least) to say "style the first div in the fieldset like so" instead of saying the 2nd.
Why is this happening and is there a way to achieve the effect I want (to be able to call div:first-child)?
The :nth-child selector ignores the elements type. div:nth-child(2) selects a <div> which is a second child.
If you want to select the first div, use the :nth-of-type(1) or :first-of-type selector.
Demo: http://jsfiddle.net/Z3Bcq/1/
In this case, the <legend> preceding the first div is the actual :first-child of their shared parent. You could consider using the :nth-of-type selector.
Fiddle here
Here is the explanation how :nth-child selector works:
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. For more information, see Understanding :nth-child Pseudo-class Expressions.
If N is a number or a number expression, :nth-child(N) matches elements that are preceded by N-1 siblings in the document tree.
The following example selectors are equivalent, and will match odd-numbered table rows:
tr:nth-child(2n+1) {
⋮ declarations
}
tr:nth-child(odd) {
⋮ declarations
}
This example selector will match the first three rows of any table:
tr:nth-child(-n+3) {
⋮ declarations
}
This example selector will match any paragraph that’s the first child element of its parent element:
p:nth-child(1) {
⋮ declarations
}
This is, of course, equivalent to the selector p:first-child.
Note: For more details on selector please see the link: http://reference.sitepoint.com/css/pseudoclass-nthchild