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;
}