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

CSS3 and Selectors

on

  • 3,214 views

Presentation given at the CSS Summit 2011

Presentation given at the CSS Summit 2011

Statistics

Views

Total Views
3,214
Views on SlideShare
3,128
Embed Views
86

Actions

Likes
6
Downloads
163
Comments
0

2 Embeds 86

http://lanyrd.com 81
https://twitter.com 5

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

    CSS3 and Selectors CSS3 and Selectors Presentation Transcript

    • CSS3 &SELECTORS
    • RACHEL ANDREW @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
    • WHAT ISCSS3?
    • CSS3 IS THENEXT VERSION OF CSS
    • CSS3 ISMODULAR
    • SOME CSS3 MODULESARE MORE COMPLETE THAN OTHERS
    • W3C MATURITY LEVELSWorking DraftCandidate RecommendationProposed RecommendationW3C Recommendationhttp://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
    • CSS3 IS SUPPORTED BY BROWSERSSome browsers and some (parts of) modules.
    • USING CSS3
    • SELECTORS MODULE W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/
    • BASIC SELECTORSh1 {}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 selectorstarget elements more precisely without adding classes
    • STRUCTURAL PSEUDO- CLASS SELECTORS
    • PSEUDO-CLASS SELECTORSa:link {}a:visited {}
    • DYNAMIC PSEUDO-CLASSa:hover {}a:active {}
    • :first-childtarget an element when it is the first child of a parent element
    • :first-child
    • :first-childdiv#wrapper p {! ! font-size: 1.5em;}
    • :first-childdiv#wrapper p:first-child {! ! font-size: 1.5em;}
    • :first-child
    • :last-childtarget an element when it is the last child of a parent element
    • :last-child
    • :last-childul#navigation li:last-child {! ! border-bottom: none;}
    • :last-child
    • :nth-childselect multiple elements according to their position in the document tree
    • :nth-child
    • :nth-childtr:nth-child(odd) td {! ! background-color: #f0e9c5;}
    • :nth-child
    • :nth-childtr:nth-child(3) td {! ! background-color: #f0e9c5;}
    • :nth-child
    • :nth-childtr:nth-child(2n+1) td {! ! background-color: #f0e9c5;} http://reference.sitepoint.com/css/understandingnthchildexpressions
    • :nth-of-type select multiple elements according to their position in the document tree BUT only thoseelements that are the same as the type the rule is applied to.
    • :nth-of-typep:nth-of-type(odd) {! ! background-color: #f0e9c5;}
    • :nth-of-type
    • :only-childmatches an element if it is the only child element of it’s parent.
    • :only-childli {! list-style-type: disc;}!li:only-child {! list-style-type: none;}
    • :only-child
    • :emptymatches an element if it is empty
    • :emptyp {! padding: 0 0 1em 0;! margin: 0;}!p:empty {! padding: 0;}
    • FOR INPUT ELEMENTSStructural pseudo-classes for use with forms.
    • :checkedthe checked state of a checkbox or radio button
    • :checked#agreeterms:checked { border:2px solid blue;}
    • ENABLED AND DISABLED detecting input element states
    • :enabledinput:enabled { color: #000;}
    • :disabledinput:disabled { color: #999;}
    • THE NEGATION PSEUDO- CLASS :not(selector)
    • :not<p> ... </p><p class=”box”> ... </p><p> ... </p>
    • :notp:not(.box) {! padding: 0 0 3em 0;! margin: 0;}!p.box {! border:1px solid #000;! margin: 0 0 2em 0;}
    • :not
    • PSEUDO-ELEMENTS
    • :first-letterthe first character of the first line of text
    • :first-letterdiv#wrapper:first-letter {! font-size: 200%;! font-weight: bold;! color: red;}
    • :first-letter
    • :first-linethe first formatted line of text
    • :first-linediv#wrapper:first-line {! font-size: 200%;! font-weight: bold;! color: red;}
    • :first-line
    • :beforeRender content before the element when using generated content
    • :before<div id=”content”> ... </div>
    • :before#content:before { content: "Start here:";}
    • :before
    • :afterRender content after the element when using generated content
    • :after#content:after { content: "End here:";}
    • ::selectionContent selected in browser by the user
    • ::selectiondiv#wrapper p::selection {! background-color: red;}
    • ::selection
    • COMBINATORSCombining selectors to target elements
    • DESCENDANT SELECTORSelect all elements that are descendants of a specified parent
    • DESCENDANT SELECTORdiv#wrapper p {! font-size: 1.5em;}
    • CHILD SELECTORSelect all elements that are immediate children of a specified 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 SELECTORli {! color: #000;}!ul > li {! color: red;}
    • Child Selector
    • ADJACENT SIBLINGSelect elements that are the adjacent siblings of an element
    • ADJACENT SIBLINGdiv#wrapper h1 + p {! font-size: 1.5em;}
    • Adjacent Sibling
    • GENERAL SIBLINGSelect elements that are the siblings of an element
    • GENERAL SIBLINGdiv#wrapper h2~p {! color: red;}
    • General Sibling
    • ATTRIBUTE SELECTORS Select elements based on attributes
    • ATTRIBUTE SELECTORSform input[type="text"] {}!form input[type="submit"] {}
    • Attribute Selectors
    • ATTRIBUTE SELECTORSlabel[for="fContact"] { ! float: none; ! width: auto;}
    • ATTRIBUTE SELECTORSa[href ^="mailto:"] {! ! padding-right: 20px;! ! background-image:url(email.png);! ! background-repeat: no-repeat;! ! background-position: right center;}
    • BROWSERSUPPORT
    • Browser Support
    • DOES ITMATTER?
    • YES, ITMATTERS.
    • JAVASCRIPTPlug the holes in browser support using JavaScript.
    • JQUERY: FIRST-CHILDdiv#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>
    • JQUERY: LAST-CHILDul#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>
    • JQUERY: NTH-CHILDtr: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>
    • CSS “POLYFILLS” plugging the holes in support
    • WHAT IS A POLYFILL? A polyfill, or polyfiller, is a piece of code (orplugin) that provides the technology that you, thedeveloper, expect the browser to provide natively. http://remysharp.com/2010/10/08/what-is-a-polyfill/
    • SELECTIVIZRhttp://selectivizr.com/
    • ECSSTENDERhttp://ecsstender.org/
    • CSS3 WORKFLOW How I approach my projects.
    • CSS3 WORKFLOWDevelop without any polyfill or JavaScript fixes in place.
    • CSS3 WORKFLOW Validate.
    • CSS3 WORKFLOW Test & Fix in older browsers
    • CSS3 WORKFLOWDecide if you need to use a polyfill and which kind
    • CSS3 WORKFLOW Test again.
    • THANK YOU! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com