Bert Bos & Eva Kasal | CSS3 in Style
Child selector: E > F
Sibling the child (F) of another element (E)
.sommaire_catalogue>li{ background:url(../images/ selectors/folder.png) no-repeat; }
Adjacent sibling combinator: E + F
targets an element (F) immediatly preceded by another (E)
h1+p{ font-weight:bold; color:#777; font-size:1.4em; padding:1em; }
General sibling combinator: E ~ F
targets an element (F) preceded by another (E)
e.g.: each p following h1.english, both have the same parent (body there)
h1.english ~ p{ font-weight:bold; color:#777; font-size:1.4em; padding:1em; }
Attribute selector: E[foo]
targets an element (E) with a "foo" attribute
e.g.: each img with an alt attribute
img[alt]{ border:10px rgb(147,103,94) solid; border-radius:10px; }
Attribute selector: E:not(s)
targets an element (E) that does not match "s"
e.g.: each img with NO alt attribute
img:not([alt]){ border:10px rgb(147,103,94) solid; border-radius:10px; }
Attribute selector: E[foo*="bar"]
targets an element (E) whose "foo" attribute contains the string "bar"
e.g.: each a whose "href" attribute contains the substring "glossaire"
a[href*="glossaire"]{ color:gray; }
Attribute selector: E[foo^="bar"]
targets an element (E) whose "foo" attribute begins with the string "bar"
e.g.: each a whose "href" attribute begins with the substring "http"
a[href^="http"]{ color:#6996d3; padding-left:1em; text-decoration:none; }
Attribute selector: E[foo$="bar"]
targets an element (E) whose "foo" attribute ends with the string "bar"
e.g.: each a whose "href" attribute ends with the substring ".pdf"
a[href$=".pdf"]{ background:url(../images/ selectors/pictopdf.gif) no-repeat 100% 50%; }
E:first-child
targets an element (E) that is the first child of its parent
e.g.: each <th> that is the first child of a <tr>
th:first-child{ border-left:none; } th:nth-child(1){ /* is similar to :first-child */ border-left:none; }
E:last-of-type
targets an element (E) that is the last child of its type in its parent
e.g.: each <th> that is the last th of a <tr>
th:last-of-type{ border-bottom:none; }
E:nth-child(2n+4)
targets each 2nd E element beginning with the 4th child of its parent
e.g.: each 2nd <td> beginning with 4th child of its parent
td:nth-child(2n + 4){ background:rgba(29, 53, 91, .3); }
E:nth-child(odd)
targets each E odd child of its parent
e.g.: each two <td> child of its parent
td:nth-child(odd){ background:orange; }