Mastering CSS3 Selectors

hello.

Friday, 15 October 2010

Rachel Andrew

@rachelandrew

rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com


Mastering
CSS3
Selectors

CSS3 is the next
version of CSS


CSS3 is Modular


Some CSS3 modules
are more complete
than others


W3C Maturity Levels
Working Draft
Candidate Recommendation
Proposed Recommendation
W3C Recommendation
http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels


CSS3 is supported by
browsers

Some browsers and some (parts of) modules.


Using CSS3


Selectors module

W3C Proposed Recommendation
http://www.w3.org/TR/css3-selectors/


Basic Selectors
h1 {}

p {}

.thing {}

#uniquething {}

.thing p


The problem with
CSS2 selectors


Adding classes

<h1>My heading</h1>
<p class=”first”> ... </p>
<p> ... </p>


CSS3 Selectors
“Common sense” new selectors
target elements more precisely without adding classes


Structural pseudo-
class selectors


a:link {}
a:visited {}
a:hover {}
a:active {}


:ﬁrst-child

target an element when it is the ﬁrst child of a parent
element


:ﬁrst-child


:ﬁrst-child

div#wrapper p {
! ! font-size: 1.5em;
}


:ﬁrst-child

div#wrapper p:first-child {
}


:last-child

target an element when it is the last child of a parent
element


:last-child


:last-child

ul#navigation li:last-child {
! ! border-bottom: none;
}


:nth-child

select multiple elements according to their position in
the document tree


:nth-child


:nth-child

tr:nth-child(odd) td {
! ! background-color: #f0e9c5;
}


:nth-child

tr:nth-child(3) td {
}


:nth-child

tr:nth-child(2n+1) td {
}

http://reference.sitepoint.com/css/understandingnthchildexpressions


:nth-of-type

select multiple elements according to their position in
the document tree BUT only those elements that are
the same as the type the rule is applied to.


:nth-of-type

p:nth-of-type(odd) {
}


:nth-of-type


:only-child

matches an element if it is the only child element of it’s
parent.


:only-child
li {
! list-style-type: disc;
}
!
li:only-child {
! list-style-type: none;
}


:only-child


:empty

matches an element if it is empty


:empty
p {
! padding: 0 0 1em 0;
! margin: 0;
}
!
p:empty {
! padding: 0;
}


For input elements

Structural pseudo-classes for use with forms.


:checked

the checked state of a checkbox or radio button


:checked

#agreeterms:checked {
border:2px solid blue;
}


enabled and disabled

detecting input element states


:enabled

input:enabled {
color: #000;
}


:disabled

input:disabled {
color: #999;
}


the Negation
pseudo-class

:not(selector)


:not
<p> ... </p>
<p class=”box”> ... </p>
<p> ... </p>


:not
p:not(.box) {
! padding: 0 0 3em 0;
! margin: 0;
}
!
p.box {
! border:1px solid #000;
! margin: 0 0 2em 0;
}


:not


Pseudo-elements


:first-letter

the first character of the first line of text


:ﬁrst-letter
div#wrapper:first-letter {
! font-size: 200%;
! font-weight: bold;
! color: red;
}


:ﬁrst-letter


:ﬁrst-line

the ﬁrst formatted line of text


:ﬁrst-line
div#wrapper:first-line {
! font-size: 200%;
! font-weight: bold;
! color: red;
}


:ﬁrst-line


:before

Render content before the element when using
generated content


:before

<div id=”content”> ... </div>


:before
#content:before {
content: "Start here:";
}


:before


:after

Render content after the element when using
generated content


:after
#content:after {
content: "End here:";
}


::selection

Content selected in browser by the user


::selection
div#wrapper p::selection {!
background-color: red;
}


::selection


Combinators

Combining selectors to target elements


Descendant Selector

Select all elements that are descendants of a speciﬁed
parent


Descendant Selector

div#wrapper p {
! font-size: 1.5em;
}


Child Selector

Select all elements that are immediate children of a
speciﬁed parent


Child Selector
<ul>
<li>Item 1
<ol>
<li>Sub list item 1</li>
<li>Sub list item 2</li>
</ol>
</li>
<li>Item 2</li>
</ul>


Child Selector

li {
! color: #000;
}
!
ul > li {
! color: red;
}


Child Selector


Adjacent Sibling

Select elements that are the adjacent siblings of an
element


Adjacent Sibling

div#wrapper h1 + p {
! font-size: 1.5em;
}


Adjacent Sibling


General Sibling

Select elements that are the siblings of an element


General Sibling

div#wrapper h2~p {
! color: red;
}


General Sibling


Attribute Selectors

Select elements based on attributes


Attribute Selectors

form input[type="text"] {

}
!
form input[type="submit"] {

}


Attribute Selectors


Attribute Selectors
label[for="fContact"] {
! float: none;
! width: auto;
}

a[href ^="mailto:"] {
! ! padding-right: 20px;
! ! background-image:url(email.png);
! ! background-repeat: no-repeat;
! ! background-position: right center;
}


Browser
Support

Browser Support


Does it
matter?

Yes, it
matters.

Vendor-speciﬁc
extensions

Implementing early stage CSS3


border-radius


border-radius
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


In defence of vendor-
speciﬁc extensions


JavaScript

Plug the holes in browser support using JavaScript.


jQuery: ﬁrst-child
div#wrapper p:first-child,
div#wrapper p.first {
}

<script src="http://code.jquery.com/jquery-latest.js"></
script>
<script>
$(document).ready(function(){
! $("div#wrapper p:first-child").addClass("first");
});
</script>


jQuery: last-child
ul#navigation li:last-child, ul#navigation li.last {
! ! border-bottom: none;
}

script>
<script>
! $("ul#navigation li:last-child").addClass("last");
});
</script>


jQuery: nth-child
tr:nth-child(odd) td, td.odd {
! background-color: #f0e9c5;
}

script>
<script>
! $("tr:nth-child(odd) td").addClass("odd");
});
</script>


Scripts that “ﬁx IE”

http://www.keithclark.co.uk/labs/ie-css3/
http://ecsstender.org


Thank you.


Mastering CSS3 Selectors

More Related Content

Viewers also liked

Similar to Mastering CSS3 Selectors

More from Rachel Andrew

Recently uploaded

Mastering CSS3 Selectors