Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 Selectors

CSS3 Selectors

Rachel Andrew

July 31, 2012
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. :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.
  2. li { ! list-style-type: disc; } ! li:only-child { !

    list-style-type: none; } :only-child
  3. p { ! padding: 0 0 1em 0; ! margin:

    0; } ! p:empty { ! padding: 0; } :empty
  4. <input type="text" name="fName" id="fName" required="required" /> ! ! <input type="email"

    name="fEmail" id="fEmail" required="required" placeholder="[email protected]" /> HTML5 attributes
  5. <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
  6. li { ! color: #000; } ! ul > li

    { ! color: red; } Child Selector
  7. 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>
  8. 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>
  9. 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>
  10. What is a polyfill? A polyfill, or polyfiller, is a

    piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. http://remysharp.com/2010/10/08/what-is-a-polyfill/
  11. IE8

  12. var patch_css = function() { ! ! // supporting css

    stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css