CSS3 and Selectors

3,663 views

Published on

Presentation given at the CSS Summit 2011

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,663
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
197
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

CSS3 and Selectors

  1. 1. CSS3 &SELECTORS
  2. 2. RACHEL ANDREW @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
  3. 3. WHAT ISCSS3?
  4. 4. CSS3 IS THENEXT VERSION OF CSS
  5. 5. CSS3 ISMODULAR
  6. 6. SOME CSS3 MODULESARE MORE COMPLETE THAN OTHERS
  7. 7. W3C MATURITY LEVELSWorking DraftCandidate RecommendationProposed RecommendationW3C Recommendationhttp://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
  8. 8. CSS3 IS SUPPORTED BY BROWSERSSome browsers and some (parts of) modules.
  9. 9. USING CSS3
  10. 10. SELECTORS MODULE W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/
  11. 11. BASIC SELECTORSh1 {}p {}.thing {}#uniquething {}.thing p
  12. 12. THE PROBLEM WITH CSS2 SELECTORS
  13. 13. ADDING CLASSES<h1>My heading</h1><p class=”first”> ... </p><p> ... </p>
  14. 14. CSS3 SELECTORS “Common sense” new selectorstarget elements more precisely without adding classes
  15. 15. STRUCTURAL PSEUDO- CLASS SELECTORS
  16. 16. PSEUDO-CLASS SELECTORSa:link {}a:visited {}
  17. 17. DYNAMIC PSEUDO-CLASSa:hover {}a:active {}
  18. 18. :first-childtarget an element when it is the first child of a parent element
  19. 19. :first-child
  20. 20. :first-childdiv#wrapper p {! ! font-size: 1.5em;}
  21. 21. :first-childdiv#wrapper p:first-child {! ! font-size: 1.5em;}
  22. 22. :first-child
  23. 23. :last-childtarget an element when it is the last child of a parent element
  24. 24. :last-child
  25. 25. :last-childul#navigation li:last-child {! ! border-bottom: none;}
  26. 26. :last-child
  27. 27. :nth-childselect multiple elements according to their position in the document tree
  28. 28. :nth-child
  29. 29. :nth-childtr:nth-child(odd) td {! ! background-color: #f0e9c5;}
  30. 30. :nth-child
  31. 31. :nth-childtr:nth-child(3) td {! ! background-color: #f0e9c5;}
  32. 32. :nth-child
  33. 33. :nth-childtr:nth-child(2n+1) td {! ! background-color: #f0e9c5;} http://reference.sitepoint.com/css/understandingnthchildexpressions
  34. 34. :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.
  35. 35. :nth-of-typep:nth-of-type(odd) {! ! background-color: #f0e9c5;}
  36. 36. :nth-of-type
  37. 37. :only-childmatches an element if it is the only child element of it’s parent.
  38. 38. :only-childli {! list-style-type: disc;}!li:only-child {! list-style-type: none;}
  39. 39. :only-child
  40. 40. :emptymatches an element if it is empty
  41. 41. :emptyp {! padding: 0 0 1em 0;! margin: 0;}!p:empty {! padding: 0;}
  42. 42. FOR INPUT ELEMENTSStructural pseudo-classes for use with forms.
  43. 43. :checkedthe checked state of a checkbox or radio button
  44. 44. :checked#agreeterms:checked { border:2px solid blue;}
  45. 45. ENABLED AND DISABLED detecting input element states
  46. 46. :enabledinput:enabled { color: #000;}
  47. 47. :disabledinput:disabled { color: #999;}
  48. 48. THE NEGATION PSEUDO- CLASS :not(selector)
  49. 49. :not<p> ... </p><p class=”box”> ... </p><p> ... </p>
  50. 50. :notp:not(.box) {! padding: 0 0 3em 0;! margin: 0;}!p.box {! border:1px solid #000;! margin: 0 0 2em 0;}
  51. 51. :not
  52. 52. PSEUDO-ELEMENTS
  53. 53. :first-letterthe first character of the first line of text
  54. 54. :first-letterdiv#wrapper:first-letter {! font-size: 200%;! font-weight: bold;! color: red;}
  55. 55. :first-letter
  56. 56. :first-linethe first formatted line of text
  57. 57. :first-linediv#wrapper:first-line {! font-size: 200%;! font-weight: bold;! color: red;}
  58. 58. :first-line
  59. 59. :beforeRender content before the element when using generated content
  60. 60. :before<div id=”content”> ... </div>
  61. 61. :before#content:before { content: "Start here:";}
  62. 62. :before
  63. 63. :afterRender content after the element when using generated content
  64. 64. :after#content:after { content: "End here:";}
  65. 65. ::selectionContent selected in browser by the user
  66. 66. ::selectiondiv#wrapper p::selection {! background-color: red;}
  67. 67. ::selection
  68. 68. COMBINATORSCombining selectors to target elements
  69. 69. DESCENDANT SELECTORSelect all elements that are descendants of a specified parent
  70. 70. DESCENDANT SELECTORdiv#wrapper p {! font-size: 1.5em;}
  71. 71. CHILD SELECTORSelect all elements that are immediate children of a specified parent
  72. 72. 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>
  73. 73. CHILD SELECTORli {! color: #000;}!ul > li {! color: red;}
  74. 74. Child Selector
  75. 75. ADJACENT SIBLINGSelect elements that are the adjacent siblings of an element
  76. 76. ADJACENT SIBLINGdiv#wrapper h1 + p {! font-size: 1.5em;}
  77. 77. Adjacent Sibling
  78. 78. GENERAL SIBLINGSelect elements that are the siblings of an element
  79. 79. GENERAL SIBLINGdiv#wrapper h2~p {! color: red;}
  80. 80. General Sibling
  81. 81. ATTRIBUTE SELECTORS Select elements based on attributes
  82. 82. ATTRIBUTE SELECTORSform input[type="text"] {}!form input[type="submit"] {}
  83. 83. Attribute Selectors
  84. 84. ATTRIBUTE SELECTORSlabel[for="fContact"] { ! float: none; ! width: auto;}
  85. 85. ATTRIBUTE SELECTORSa[href ^="mailto:"] {! ! padding-right: 20px;! ! background-image:url(email.png);! ! background-repeat: no-repeat;! ! background-position: right center;}
  86. 86. BROWSERSUPPORT
  87. 87. Browser Support
  88. 88. DOES ITMATTER?
  89. 89. YES, ITMATTERS.
  90. 90. JAVASCRIPTPlug the holes in browser support using JavaScript.
  91. 91. 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>
  92. 92. 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>
  93. 93. 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>
  94. 94. CSS “POLYFILLS” plugging the holes in support
  95. 95. 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/
  96. 96. SELECTIVIZRhttp://selectivizr.com/
  97. 97. ECSSTENDERhttp://ecsstender.org/
  98. 98. CSS3 WORKFLOW How I approach my projects.
  99. 99. CSS3 WORKFLOWDevelop without any polyfill or JavaScript fixes in place.
  100. 100. CSS3 WORKFLOW Validate.
  101. 101. CSS3 WORKFLOW Test & Fix in older browsers
  102. 102. CSS3 WORKFLOWDecide if you need to use a polyfill and which kind
  103. 103. CSS3 WORKFLOW Test again.
  104. 104. THANK YOU! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com

×