hello.

Friday, 15 October 2010
Rachel Andrew

                              @rachelandrew

                             rachelandrew.co.uk
              ...
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 Rec...
CSS3 is supported by
                       browsers

                          Some browsers and some (parts of) modules....
Using CSS3

Friday, 15 October 2010
Selectors module

                             W3C Proposed Recommendation
                           http://www.w3.org/TR...
Basic Selectors
                 h1 {}

                 p {}

                 .thing {}

                 #uniquething {...
The problem with
                           CSS2 selectors




Friday, 15 October 2010
Adding classes


                 <h1>My heading</h1>
                 <p class=”first”> ... </p>
                 <p> ......
CSS3 Selectors
                              “Common sense” new selectors
                   target elements more precisel...
Structural pseudo-
                            class selectors




Friday, 15 October 2010
a:link {}
                 a:visited {}
                 a:hover {}
                 a:active {}




Friday, 15 October 20...
:first-child

                    target an element when it is the first child of a parent
                                 ...
:first-child




Friday, 15 October 2010
:first-child

                 div#wrapper p {
                 ! ! font-size: 1.5em;
                 }




Friday, 15 Oct...
:first-child

                 div#wrapper p:first-child {
                 ! ! font-size: 1.5em;
                 }




Fr...
:first-child




Friday, 15 October 2010
:last-child

                     target an element when it is the last child of a parent
                                ...
:last-child




Friday, 15 October 2010
:last-child

                 ul#navigation li:last-child {
                 ! ! border-bottom: none;
                 }

...
:last-child




Friday, 15 October 2010
:nth-child

                   select multiple elements according to their position in
                                   ...
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(odd) td {
                 ! ! background-color: #f0e9c5;
                 }



...
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(3) td {
                 ! ! background-color: #f0e9c5;
                 }




F...
:nth-child




Friday, 15 October 2010
:nth-child

                 tr:nth-child(2n+1) td {
                 ! ! background-color: #f0e9c5;
                 }


...
:nth-of-type

                   select multiple elements according to their position in
                   the document t...
:nth-of-type

                 p:nth-of-type(odd) {
                 ! ! background-color: #f0e9c5;
                 }



...
:nth-of-type




Friday, 15 October 2010
:only-child

                  matches an element if it is the only child element of it’s
                                ...
:only-child
                 li {
                 ! list-style-type: disc;
                 }
                 !
        ...
: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;
                 }
      ...
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, ...
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 20...
:not
                 <p> ... </p>
                 <p class=”box”> ... </p>
                 <p> ... </p>




Friday, 15 ...
:not
                 p:not(.box) {
                 ! padding: 0 0 3em 0;
                 ! margin: 0;
                 ...
: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-weigh...
: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: b...
:first-line




Friday, 15 October 2010
:before

                          Render content before the element when using
                                       gen...
:before

                 <div id=”content”> ... </div>




Friday, 15 October 2010
:before
                 #content:before {
                   content: "Start here:";
                 }




Friday, 15 Oc...
:before




Friday, 15 October 2010
:after

                          Render content after the element when using
                                      genera...
:after
                 #content:after {
                   content: "End here:";
                 }




Friday, 15 Octobe...
::selection

                          Content selected in browser by the user




Friday, 15 October 2010
::selection
                 div#wrapper p::selection {!
                   background-color: red;
                 }




...
::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
                          ...
Descendant Selector

                 div#wrapper p {
                 ! font-size: 1.5em;
                 }




Friday, ...
Child Selector

                          Select all elements that are immediate children of a
                           ...
Child Selector
                 <ul>
                  <li>Item 1
                   <ol>
                      <li>Sub li...
Child Selector

                   li {
                   ! color: #000;
                   }
                   !
      ...
Child Selector




Friday, 15 October 2010
Adjacent Sibling

                          Select elements that are the adjacent siblings of an
                         ...
Adjacent Sibling

                 div#wrapper h1 + p {
                 ! font-size: 1.5em;
                 }




Friday...
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 Octo...
General Sibling




Friday, 15 October 2010
Attribute Selectors

                            Select elements based on attributes




Friday, 15 October 2010
Attribute Selectors

                 form input[type="text"] {

                 }
                 !
                 fo...
Attribute Selectors




Friday, 15 October 2010
Attribute Selectors
                 label[for="fContact"] {
                     ! float: none;
                     ! wi...
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...
border-radius




Friday, 15 October 2010
border-radius
                 .box {
                    -moz-border-radius: 10px;
                    -webkit-border-rad...
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 {
                 ! !...
jQuery: last-child
                 ul#navigation li:last-child, ul#navigation li.last {
                 ! ! border-botto...
jQuery: nth-child
                 tr:nth-child(odd) td, td.odd {
                 ! background-color: #f0e9c5;
          ...
Scripts that “fix IE”

                           http://www.keithclark.co.uk/labs/ie-css3/
                               ...
Thank you.




Friday, 15 October 2010
Upcoming SlideShare
Loading in...5
×

Mastering CSS3 Selectors

3,122
-1

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,122
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
142
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×