mastering css3 selectors
DESCRIPTION
Presentation for Think Vitamin Online CSS3 Conference.TRANSCRIPT
hello.
Friday, 15 October 2010
Rachel Andrew
@rachelandrew
rachelandrew.co.ukedgeofmyseat.comgrabaperch.com
Friday, 15 October 2010
Mastering CSS3
SelectorsFriday, 15 October 2010
CSS3 is the next version of CSS
Friday, 15 October 2010
CSS3 is Modular
Friday, 15 October 2010
Some CSS3 modules are more complete
than others
Friday, 15 October 2010
W3C Maturity LevelsWorking DraftCandidate RecommendationProposed RecommendationW3C Recommendation
http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
Friday, 15 October 2010
CSS3 is supported by browsers
Some browsers and some (parts of) modules.
Friday, 15 October 2010
Using CSS3
Friday, 15 October 2010
Selectors module
W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/
Friday, 15 October 2010
h1 {}
p {}
.thing {}
#uniquething {}
.thing p
Basic Selectors
Friday, 15 October 2010
The problem with CSS2 selectors
Friday, 15 October 2010
<h1>My heading</h1><p class=”first”> ... </p><p> ... </p>
Adding classes
Friday, 15 October 2010
CSS3 Selectors“Common sense” new selectors
target elements more precisely without adding classes
Friday, 15 October 2010
Structural pseudo-class selectors
Friday, 15 October 2010
a:link {}a:visited {}a:hover {}a:active {}
Friday, 15 October 2010
:first-child
target an element when it is the first child of a parent element
Friday, 15 October 2010
:first-child
Friday, 15 October 2010
div#wrapper p {! ! font-size: 1.5em;}
:first-child
Friday, 15 October 2010
div#wrapper p:first-child {! ! font-size: 1.5em;}
:first-child
Friday, 15 October 2010
:first-child
Friday, 15 October 2010
:last-child
target an element when it is the last child of a parent element
Friday, 15 October 2010
:last-child
Friday, 15 October 2010
ul#navigation li:last-child {! ! border-bottom: none;}
:last-child
Friday, 15 October 2010
:last-child
Friday, 15 October 2010
:nth-child
select multiple elements according to their position in the document tree
Friday, 15 October 2010
:nth-child
Friday, 15 October 2010
tr:nth-child(odd) td {! ! background-color: #f0e9c5;}
:nth-child
Friday, 15 October 2010
:nth-child
Friday, 15 October 2010
tr:nth-child(3) td {! ! background-color: #f0e9c5;}
:nth-child
Friday, 15 October 2010
:nth-child
Friday, 15 October 2010
tr:nth-child(2n+1) td {! ! background-color: #f0e9c5;}
:nth-child
http://reference.sitepoint.com/css/understandingnthchildexpressions
Friday, 15 October 2010
: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.
Friday, 15 October 2010
p:nth-of-type(odd) {! ! background-color: #f0e9c5;}
:nth-of-type
Friday, 15 October 2010
:nth-of-type
Friday, 15 October 2010
:only-child
matches an element if it is the only child element of it’s parent.
Friday, 15 October 2010
li {! list-style-type: disc;}!li:only-child {! list-style-type: none;}
:only-child
Friday, 15 October 2010
:only-child
Friday, 15 October 2010
:empty
matches an element if it is empty
Friday, 15 October 2010
p {! padding: 0 0 1em 0;! margin: 0;}!p:empty {! padding: 0;}
:empty
Friday, 15 October 2010
For input elements
Structural pseudo-classes for use with forms.
Friday, 15 October 2010
:checked
the checked state of a checkbox or radio button
Friday, 15 October 2010
#agreeterms:checked {border:2px solid blue;
}
:checked
Friday, 15 October 2010
enabled and disabled
detecting input element states
Friday, 15 October 2010
input:enabled {color: #000;
}
:enabled
Friday, 15 October 2010
input:disabled {color: #999;
}
:disabled
Friday, 15 October 2010
the Negation pseudo-class
:not(selector)
Friday, 15 October 2010
<p> ... </p><p class=”box”> ... </p><p> ... </p>
:not
Friday, 15 October 2010
p:not(.box) {! padding: 0 0 3em 0;! margin: 0;}!p.box {! border:1px solid #000;! margin: 0 0 2em 0;}
:not
Friday, 15 October 2010
:not
Friday, 15 October 2010
Pseudo-elements
Friday, 15 October 2010
:first-letter
the first character of the first line of text
Friday, 15 October 2010
div#wrapper:first-letter {! font-size: 200%;! font-weight: bold;! color: red;}
:first-letter
Friday, 15 October 2010
:first-letter
Friday, 15 October 2010
:first-line
the first formatted line of text
Friday, 15 October 2010
div#wrapper:first-line {! font-size: 200%;! font-weight: bold;! color: red;}
:first-line
Friday, 15 October 2010
:first-line
Friday, 15 October 2010
:before
Render content before the element when using generated content
Friday, 15 October 2010
<div id=”content”> ... </div>
:before
Friday, 15 October 2010
#content:before { content: "Start here:";}
:before
Friday, 15 October 2010
:before
Friday, 15 October 2010
:after
Render content after the element when using generated content
Friday, 15 October 2010
#content:after { content: "End here:";}
:after
Friday, 15 October 2010
::selection
Content selected in browser by the user
Friday, 15 October 2010
div#wrapper p::selection {!background-color: red;
}
::selection
Friday, 15 October 2010
::selection
Friday, 15 October 2010
Combinators
Combining selectors to target elements
Friday, 15 October 2010
Descendant Selector
Select all elements that are descendants of a specified parent
Friday, 15 October 2010
div#wrapper p {! font-size: 1.5em;}
Descendant Selector
Friday, 15 October 2010
Child Selector
Select all elements that are immediate children of a specified parent
Friday, 15 October 2010
<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
Friday, 15 October 2010
li {! color: #000;}!ul > li {! color: red;}
Child Selector
Friday, 15 October 2010
Child Selector
Friday, 15 October 2010
Adjacent Sibling
Select elements that are the adjacent siblings of an element
Friday, 15 October 2010
div#wrapper h1 + p {! font-size: 1.5em;}
Adjacent Sibling
Friday, 15 October 2010
Adjacent Sibling
Friday, 15 October 2010
General Sibling
Select elements that are the siblings of an element
Friday, 15 October 2010
div#wrapper h2~p {! color: red;}
General Sibling
Friday, 15 October 2010
General Sibling
Friday, 15 October 2010
Attribute Selectors
Select elements based on attributes
Friday, 15 October 2010
form input[type="text"] {
}!form input[type="submit"] { }
Attribute Selectors
Friday, 15 October 2010
Attribute Selectors
Friday, 15 October 2010
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
Friday, 15 October 2010
Browser Support
Friday, 15 October 2010
Browser Support
Friday, 15 October 2010
Does it matter?
Friday, 15 October 2010
Friday, 15 October 2010
Friday, 15 October 2010
Yes, it matters.
Friday, 15 October 2010
Vendor-specific extensions
Implementing early stage CSS3
Friday, 15 October 2010
border-radius
Friday, 15 October 2010
.box {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}
border-radius
Friday, 15 October 2010
In defence of vendor-specific extensions
Friday, 15 October 2010
JavaScript
Plug the holes in browser support using JavaScript.
Friday, 15 October 2010
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>
Friday, 15 October 2010
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>
Friday, 15 October 2010
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>
Friday, 15 October 2010
Scripts that “fix IE”
http://www.keithclark.co.uk/labs/ie-css3/http://ecsstender.org
Friday, 15 October 2010
Thank you.
Friday, 15 October 2010