Bert Bos |
CSS tutorial – selectors
Selectors - principles
For CSS, a document is always a tree with two kinds of
ordered nodes:
- elements
- Unicode text (leaf)
Elements have
- type (element name)
- unordered attributes (≥ 0)
- optional unique name (ID)
- unordered classes (≥ 0)
Examples of trees
- SGML, XML, HTML5: element → element, attribute →
attribute, text → text, ID → ID (comments,
processing instructions, doctypes, entities not used)
- Programming languages (block/statement/function/etc. →
element)
Inside and outside the tree
- Selectors selecte elements and pseudo-elements
- never attributes, comments, letters…
- Based on information in the tree (cf. XPath) or outside the
tree
- inside: element name, attribute, ordering…
- outside: semantics (
:link
), history
(:visited
), interaction (:hover
), etc.
New in level 3
- XML Namespaces
x|y
- Following siblings
E ~ F
- Text-matching
~= ^= $= *= |=
(for attributes)
- Pseudo-classes for trees
:root :nth-child() etc.
- Pseudo-class for hyperlink-targets
:target
- Pseudo-classes for forms
:enabled :disabled :checked
- Negation
:not()
Sibling elements
E ~ F
an element F that has elder sibling E
<div>
<h1 id=french>French...</h1>
<p>...
<p>...
<p>...
</div>
<div>
<h1 id=english>English...</h1>
<p>...
<p>...
<p>...
</div>
#french ~ p {
font-weight: bold;
color: #077;
font-size: 1.4em;
padding-left :1em;
}
Attribute selectors
E[foo]
an element E that has an
attribute called foo
img[alt] {
border: 10px rgb(147,103,94) solid;
border-radius: 10px;
}
Negation selectors
E:not(s)
an element E that doesn't match
s
img:not([alt]) {
border: 10px rgb(147,103,94) solid;
border-radius: 10px;
}
Attribute contains text
E[foo*="bar"]
an element E with an
attribute foo that contains the text “bar”
a[href*="glossaire"] {
color: gray;
}
Attribuut begins with text
E[foo^="bar"]
an element E with an
attribute foo whose value starts with the text “bar”
a[href^="http:"] {
color:#6996d3;
padding-left:1em;
text-decoration:none;
}
Attribuut ends with text
E[foo$="bar"]
an element E that has an
attribute foo whose value ends with the text “bar”
a[href$=".pdf"]::after {
content:url(pictopdf.gif)
vertical-align: -20px;
}
First child
E:first-child
an element E that is the
first child of its parent
th:first-child {
border-left: none;
text-align: left }
th:nth-child(1) { /* same! */
border-left: none;
text-align: left }
Last element of a certain type
E:last-of-type
an element that is the last element
of type E in its parent
th:last-of-type{
border-bottom:2px solid red
}
The n'th child / every n'th child (1/2)
*:nth-child(2n+4)
every second child starting with
the 4th (i.e., children 4, 6, 8, 10, etc.)
td:nth-child(2n + 4) {
background:rgba(29, 53, 91, .3);
}
Note: no space between the “2” and the “n”!
The n'th child / every n'th child (2/2)
The n in an + b stands for all whole numbers
≥ 0 (i.e., 0, 1, 2,…)
If a or b is 0, you can omit that part:
:nth-child(0n+7)
→
:nth-child(7)
:nth-child(3n+0)
→
:nth-child(3n)
Negative numbers are allowed (and sometimes useful):
:nth-child(2n-5)
same as
:nth-child(2n+1)
:nth-child(-n+3)
only children 1, 2 and 3
(!)
Even and odd
E:nth-child(odd)
same as nth-child(2n+1)
E:nth-child(even)
same as nth-child(2n+2)
td:nth-child(odd){
background:orange;
}
Empty elements
:empty
an empty element (no text, no children)
th:empty, td:empty{
background:rgba(253,143,149, .5);
}
The target of the current URL
:target
the element that is pointed at by the
current URL, e.g..:
http://example.org/doc#fragment
From the demo:
:target { border:4px gold solid }
Check marks
:checked
the element is a checkbox that has been
checked
input:checked + label {
font-weight: bold }
Other selectors voor forms: :enabled, :disabled
:indeterminate
Selectors exercise
Make a document that allows you to switch which of two texts is
visible.
Hint: you can do this with :target
and
~
, or with :checked
and ~
(What is the advantage of :checked
over
:target
in this case?)
In HTML, SVG, etc., the classes are carried by one of the attributes.