• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mastering CSS3 Selectors
 

Mastering CSS3 Selectors

on

  • 2,799 views

Presentation for Think Vitamin Online CSS3 Conference.

Presentation for Think Vitamin Online CSS3 Conference.

Statistics

Views

Total Views
2,799
Views on SlideShare
2,751
Embed Views
48

Actions

Likes
10
Downloads
130
Comments
0

3 Embeds 48

http://lanyrd.com 35
http://adamhuxtable.com 12
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mastering CSS3 Selectors Mastering CSS3 Selectors Presentation Transcript

    • hello. Friday, 15 October 2010
    • Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 15 October 2010
    • Mastering CSS3 Selectors Friday, 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 Levels Working Draft Candidate Recommendation Proposed Recommendation W3C 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 Recommendation http://www.w3.org/TR/css3-selectors/ Friday, 15 October 2010
    • Basic Selectors h1 {} p {} .thing {} #uniquething {} .thing p Friday, 15 October 2010
    • The problem with CSS2 selectors Friday, 15 October 2010
    • Adding classes <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> 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
    • :first-child div#wrapper p { ! ! font-size: 1.5em; } Friday, 15 October 2010
    • :first-child div#wrapper p:first-child { ! ! font-size: 1.5em; } 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
    • :last-child ul#navigation li:last-child { ! ! border-bottom: none; } 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
    • :nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
    • :nth-child Friday, 15 October 2010
    • :nth-child tr:nth-child(3) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
    • :nth-child Friday, 15 October 2010
    • :nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } 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
    • :nth-of-type p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } 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
    • :only-child li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } Friday, 15 October 2010
    • :only-child Friday, 15 October 2010
    • :empty matches an element if it is empty Friday, 15 October 2010
    • :empty p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } 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
    • :checked #agreeterms:checked { border:2px solid blue; } Friday, 15 October 2010
    • enabled and disabled detecting input element states Friday, 15 October 2010
    • :enabled input:enabled { color: #000; } Friday, 15 October 2010
    • :disabled input:disabled { color: #999; } Friday, 15 October 2010
    • the Negation pseudo-class :not(selector) Friday, 15 October 2010
    • :not <p> ... </p> <p class=”box”> ... </p> <p> ... </p> Friday, 15 October 2010
    • :not p:not(.box) { ! padding: 0 0 3em 0; ! margin: 0; } ! p.box { ! border:1px solid #000; ! margin: 0 0 2em 0; } 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
    • :first-letter div#wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
    • :first-letter Friday, 15 October 2010
    • :first-line the first formatted line of text Friday, 15 October 2010
    • :first-line div#wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
    • :first-line Friday, 15 October 2010
    • :before Render content before the element when using generated content Friday, 15 October 2010
    • :before <div id=”content”> ... </div> Friday, 15 October 2010
    • :before #content:before { content: "Start here:"; } Friday, 15 October 2010
    • :before Friday, 15 October 2010
    • :after Render content after the element when using generated content Friday, 15 October 2010
    • :after #content:after { content: "End here:"; } Friday, 15 October 2010
    • ::selection Content selected in browser by the user Friday, 15 October 2010
    • ::selection div#wrapper p::selection {! background-color: red; } 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
    • Descendant Selector div#wrapper p { ! font-size: 1.5em; } Friday, 15 October 2010
    • Child Selector Select all elements that are immediate children of a specified parent Friday, 15 October 2010
    • 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> Friday, 15 October 2010
    • Child Selector li { ! color: #000; } ! ul > li { ! color: red; } 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
    • Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; } 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
    • General Sibling div#wrapper h2~p { ! color: red; } Friday, 15 October 2010
    • General Sibling Friday, 15 October 2010
    • Attribute Selectors Select elements based on attributes Friday, 15 October 2010
    • Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { } Friday, 15 October 2010
    • Attribute Selectors Friday, 15 October 2010
    • 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; } 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
    • border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } 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
    • jQuery: first-child div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } <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
    • jQuery: last-child ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } <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
    • jQuery: nth-child tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } <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