Mastering CSS3 Selectors

3,410 views
3,269 views

Published on

Presentation for Think Vitamin Online CSS3 Conference.

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

No Downloads
Views
Total views
3,410
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
145
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Mastering CSS3 Selectors

  1. 1. hello. Friday, 15 October 2010
  2. 2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 15 October 2010
  3. 3. Mastering CSS3 Selectors Friday, 15 October 2010
  4. 4. CSS3 is the next version of CSS Friday, 15 October 2010
  5. 5. CSS3 is Modular Friday, 15 October 2010
  6. 6. Some CSS3 modules are more complete than others Friday, 15 October 2010
  7. 7. 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
  8. 8. CSS3 is supported by browsers Some browsers and some (parts of) modules. Friday, 15 October 2010
  9. 9. Using CSS3 Friday, 15 October 2010
  10. 10. Selectors module W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/ Friday, 15 October 2010
  11. 11. Basic Selectors h1 {} p {} .thing {} #uniquething {} .thing p Friday, 15 October 2010
  12. 12. The problem with CSS2 selectors Friday, 15 October 2010
  13. 13. Adding classes <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Friday, 15 October 2010
  14. 14. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes Friday, 15 October 2010
  15. 15. Structural pseudo- class selectors Friday, 15 October 2010
  16. 16. a:link {} a:visited {} a:hover {} a:active {} Friday, 15 October 2010
  17. 17. :first-child target an element when it is the first child of a parent element Friday, 15 October 2010
  18. 18. :first-child Friday, 15 October 2010
  19. 19. :first-child div#wrapper p { ! ! font-size: 1.5em; } Friday, 15 October 2010
  20. 20. :first-child div#wrapper p:first-child { ! ! font-size: 1.5em; } Friday, 15 October 2010
  21. 21. :first-child Friday, 15 October 2010
  22. 22. :last-child target an element when it is the last child of a parent element Friday, 15 October 2010
  23. 23. :last-child Friday, 15 October 2010
  24. 24. :last-child ul#navigation li:last-child { ! ! border-bottom: none; } Friday, 15 October 2010
  25. 25. :last-child Friday, 15 October 2010
  26. 26. :nth-child select multiple elements according to their position in the document tree Friday, 15 October 2010
  27. 27. :nth-child Friday, 15 October 2010
  28. 28. :nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
  29. 29. :nth-child Friday, 15 October 2010
  30. 30. :nth-child tr:nth-child(3) td { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
  31. 31. :nth-child Friday, 15 October 2010
  32. 32. :nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressions Friday, 15 October 2010
  33. 33. :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
  34. 34. :nth-of-type p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } Friday, 15 October 2010
  35. 35. :nth-of-type Friday, 15 October 2010
  36. 36. :only-child matches an element if it is the only child element of it’s parent. Friday, 15 October 2010
  37. 37. :only-child li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } Friday, 15 October 2010
  38. 38. :only-child Friday, 15 October 2010
  39. 39. :empty matches an element if it is empty Friday, 15 October 2010
  40. 40. :empty p { ! padding: 0 0 1em 0; ! margin: 0; } ! p:empty { ! padding: 0; } Friday, 15 October 2010
  41. 41. For input elements Structural pseudo-classes for use with forms. Friday, 15 October 2010
  42. 42. :checked the checked state of a checkbox or radio button Friday, 15 October 2010
  43. 43. :checked #agreeterms:checked { border:2px solid blue; } Friday, 15 October 2010
  44. 44. enabled and disabled detecting input element states Friday, 15 October 2010
  45. 45. :enabled input:enabled { color: #000; } Friday, 15 October 2010
  46. 46. :disabled input:disabled { color: #999; } Friday, 15 October 2010
  47. 47. the Negation pseudo-class :not(selector) Friday, 15 October 2010
  48. 48. :not <p> ... </p> <p class=”box”> ... </p> <p> ... </p> Friday, 15 October 2010
  49. 49. :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
  50. 50. :not Friday, 15 October 2010
  51. 51. Pseudo-elements Friday, 15 October 2010
  52. 52. :first-letter the first character of the first line of text Friday, 15 October 2010
  53. 53. :first-letter div#wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
  54. 54. :first-letter Friday, 15 October 2010
  55. 55. :first-line the first formatted line of text Friday, 15 October 2010
  56. 56. :first-line div#wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } Friday, 15 October 2010
  57. 57. :first-line Friday, 15 October 2010
  58. 58. :before Render content before the element when using generated content Friday, 15 October 2010
  59. 59. :before <div id=”content”> ... </div> Friday, 15 October 2010
  60. 60. :before #content:before { content: "Start here:"; } Friday, 15 October 2010
  61. 61. :before Friday, 15 October 2010
  62. 62. :after Render content after the element when using generated content Friday, 15 October 2010
  63. 63. :after #content:after { content: "End here:"; } Friday, 15 October 2010
  64. 64. ::selection Content selected in browser by the user Friday, 15 October 2010
  65. 65. ::selection div#wrapper p::selection {! background-color: red; } Friday, 15 October 2010
  66. 66. ::selection Friday, 15 October 2010
  67. 67. Combinators Combining selectors to target elements Friday, 15 October 2010
  68. 68. Descendant Selector Select all elements that are descendants of a specified parent Friday, 15 October 2010
  69. 69. Descendant Selector div#wrapper p { ! font-size: 1.5em; } Friday, 15 October 2010
  70. 70. Child Selector Select all elements that are immediate children of a specified parent Friday, 15 October 2010
  71. 71. 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
  72. 72. Child Selector li { ! color: #000; } ! ul > li { ! color: red; } Friday, 15 October 2010
  73. 73. Child Selector Friday, 15 October 2010
  74. 74. Adjacent Sibling Select elements that are the adjacent siblings of an element Friday, 15 October 2010
  75. 75. Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; } Friday, 15 October 2010
  76. 76. Adjacent Sibling Friday, 15 October 2010
  77. 77. General Sibling Select elements that are the siblings of an element Friday, 15 October 2010
  78. 78. General Sibling div#wrapper h2~p { ! color: red; } Friday, 15 October 2010
  79. 79. General Sibling Friday, 15 October 2010
  80. 80. Attribute Selectors Select elements based on attributes Friday, 15 October 2010
  81. 81. Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { } Friday, 15 October 2010
  82. 82. Attribute Selectors Friday, 15 October 2010
  83. 83. 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
  84. 84. Browser Support Friday, 15 October 2010
  85. 85. Browser Support Friday, 15 October 2010
  86. 86. Does it matter? Friday, 15 October 2010
  87. 87. Friday, 15 October 2010
  88. 88. Friday, 15 October 2010
  89. 89. Yes, it matters. Friday, 15 October 2010
  90. 90. Vendor-specific extensions Implementing early stage CSS3 Friday, 15 October 2010
  91. 91. border-radius Friday, 15 October 2010
  92. 92. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } Friday, 15 October 2010
  93. 93. In defence of vendor- specific extensions Friday, 15 October 2010
  94. 94. JavaScript Plug the holes in browser support using JavaScript. Friday, 15 October 2010
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. Scripts that “fix IE” http://www.keithclark.co.uk/labs/ie-css3/ http://ecsstender.org Friday, 15 October 2010
  99. 99. Thank you. Friday, 15 October 2010

×