mastering css3 selectors

hello.

Friday, 15 October 2010

Rachel Andrew

@rachelandrew

rachelandrew.co.ukedgeofmyseat.comgrabaperch.com


http://www.rachelandrew.co.uk

http://www.rachelandrew.co.uk

Mastering CSS3

SelectorsFriday, 15 October 2010

CSS3 is the next version of CSS


CSS3 is Modular


Some CSS3 modules are more complete

than others


W3C Maturity LevelsWorking DraftCandidate RecommendationProposed RecommendationW3C Recommendation

http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels


http://www.w3.org/2005/10/Process-20051014/tr#

http://www.w3.org/2005/10/Process-20051014/tr#

CSS3 is supported by browsers

Some browsers and some (parts of) modules.


Using CSS3


Selectors module

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


http://www.w3.org/TR/css3-selectors/

http://www.w3.org/TR/css3-selectors/

h1 {}

p {}

.thing {}

#uniquething {}

.thing p

Basic Selectors


The problem with CSS2 selectors


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

Adding classes


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


:first-child

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


:first-child


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

:first-child


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

:first-child


:first-child


:last-child

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


:last-child


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

:last-child


:last-child


:nth-child

select multiple elements according to their position in the document tree


:nth-child


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

:nth-child


:nth-child


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

:nth-child


:nth-child


tr:nth-child(2n+1) td {! ! background-color: #f0e9c5;}

:nth-child

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.


p:nth-of-type(odd) {! ! background-color: #f0e9c5;}

:nth-of-type


:nth-of-type


:only-child

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


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

:only-child


:only-child


:empty

matches an element if it is empty


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

:empty


For input elements

Structural pseudo-classes for use with forms.


:checked

the checked state of a checkbox or radio button


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

}

:checked


enabled and disabled

detecting input element states


input:enabled {color: #000;

}

:enabled


input:disabled {color: #999;

}

:disabled


the Negation pseudo-class

:not(selector)


<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


:not


Pseudo-elements


:first-letter

the first character of the first line of text


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

:first-letter


:first-letter


:first-line

the first formatted line of text


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

:first-line


:first-line


:before

Render content before the element when using generated content


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

:before


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

:before


:before


:after

Render content after the element when using generated content


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

:after


::selection

Content selected in browser by the user


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

}

::selection


::selection


Combinators

Combining selectors to target elements


Descendant Selector

Select all elements that are descendants of a specified parent


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

Descendant Selector


Child Selector

Select all elements that are immediate children of a specified parent


<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


Child Selector


Adjacent Sibling

Select elements that are the adjacent siblings of an element


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

Adjacent Sibling


Adjacent Sibling


General Sibling

Select elements that are the siblings of an element


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

General Sibling


General Sibling


Attribute Selectors

Select elements based on attributes


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

Attribute Selectors


Browser Support


Does it matter?


Yes, it matters.


Vendor-specific extensions

Implementing early stage CSS3


border-radius


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

}

border-radius


In defence of vendor-specific extensions


JavaScript

Plug the holes in browser support using JavaScript.


div#wrapper p:first-child,div#wrapper p.first {! ! font-size: 1.5em;}

jQuery: first-child

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


http://code.jquery.com/jquery-latest.js


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

jQuery: last-child

<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("ul#navigation li:last-child").addClass("last"); });</script>




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

jQuery: nth-child

<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("tr:nth-child(odd) td").addClass("odd"); });</script>




Scripts that “fix IE”

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


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




Thank you.


mastering css3 selectors

Technology

child element

nthchild tr

child div

child ul

type p

wrapper p

nthchildodd td

nthchild3 td