Bert Bos | CSS masterclass – Amsterdam 2012
Selectors help to target specific elements without adding ids and classes in html
(Module: css3-selectors)
Child selector: E > F
All F that are children of E
.sommaire_catalogue>li{ background:url(folder.png) no-repeat; }
Adjacent sibling combinator: E + F
an element F immediately preceded by E
h1+p{ font-weight:bold; color:#777; font-size:1.3em; padding:1em; }
General sibling combinator: E ~ F
an element F preceded by sibling element E
(i.e., with the same parent)
#french ~ p { font-weight:bold; color:#077; font-size:1.4em; padding-left:1em; }
Attribute selector: E[foo]
an element E with a foo attribute
img[alt]{ border:10px rgb(147,103,94) solid; border-radius:10px; }
Attribute selector: E:not(s)
an element E that does not match s
img:not([alt]){ border:10px rgb(147,103,94) solid; border-radius:10px; }
Attribute selector: E[foo*="bar"]
an element
E whose foo attribute contains the string
bar
a[href*="glossaire"]{ color:gray; }
Attribute selector: E[foo^="bar"]
an element
E whose foo attribute begins with the text
bar
a[href^="http:"]{ color:#6996d3; padding-left:1em; text-decoration:none; }
Attribute selector: E[foo$="bar"]
an element
E whose foo attribute ends with the string
bar
a[href$=".pdf"]::after { content:url(pictopdf.gif) vertical-align: -20px; }
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 }
E:last-of-type
an element E that is the last child of its type in its parent
th:last-of-type{ border-bottom:none; }
E:nth-child(2n+4)
each 2nd E element beginning with the 4th child of its parent
td:nth-child(2n + 4){ background:rgba(29, 53, 91, .3); }
Note: No space between the number and the n
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
an empty element
th:empty, td:empty{ background:rgba(253,143,149, .5); }