Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Selectors

2,121 views

Published on

My presentation on Level 3 and 4 selectors for ConFoo

Published in: Technology
  • Be the first to comment

CSS Selectors

  1. 1. Rachel Andrew: ConFoo 2015 CSS Selectors
  2. 2. what do we mean by CSS3?
  3. 3. CSS3 is Modular
  4. 4. CSS3 doesn’t really exist …
  5. 5. • Editor’s Draft • Working Draft • Candidate Recommendation • Proposed Recommendation • W3C Recommendation W3C Maturity Levels
  6. 6. • W3C Recommendation • http://www.w3.org/TR/selectors/ Selectors module Level 3
  7. 7. Selectors Module Level 4 • Latest Editor’s Draft 4 February 2015 • http://dev.w3.org/csswg/selectors-4/
  8. 8. h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors
  9. 9. The problem with CSS2 selectors
  10. 10. <h1>My heading</h1> <p class="first"> ... </p> <p> ... </p> Adding classes
  11. 11. Level 3 Selectors “Common sense” new selectors target elements more precisely without adding classes
  12. 12. Select elements based on attributes Attribute Selectors
  13. 13. form input[type="text"] { } form input[type="submit"] { } Attribute Selectors
  14. 14. Attribute Selectors
  15. 15. label[for="fContact"] { float: none; width: auto; } Attribute Selectors
  16. 16. a[href ^="mailto:"] { padding-right: 20px; background- image:url(email.png); background-repeat: no-repeat; background-position: right center; } Attribute Selectors
  17. 17. Selecting of elements depending on their position Structural pseudo- class selectors
  18. 18. What is a pseudo-class? A pseudo-class selector acts as if you have added a class to an element in the HTML mark-up.
  19. 19. a:link {} a:visited {} Pseudo-Class Selectors
  20. 20. a:hover {} a:active {} Dynamic Pseudo- Class
  21. 21. target an element when it is the first child of a parent element :first-child
  22. 22. <div class="wrapper"> <p> ... </p> <p> ... </p> <p> ... </p> </div> :first-child
  23. 23. :first-child
  24. 24. .wrapper p { font-size: 1.5em; } :first-child
  25. 25. .wrapper p:first-child { font-size: 1.5em; } :first-child
  26. 26. :first-child
  27. 27. Pseudo-classes To target an element with our pseudo-class we append the pseudo-class to the selector: p:first-child li:first-child .classname:first-child
  28. 28. target an element when it is the last child of a parent element :last-child
  29. 29. :last-child
  30. 30. .navigation li:last-child { border-bottom: none; } :last-child
  31. 31. :last-child
  32. 32. select multiple elements according to their position in the document tree :nth-child
  33. 33. :nth-child
  34. 34. tr:nth-child(odd) td { background-color: #f0e9c5; } :nth-child
  35. 35. :nth-child
  36. 36. tr:nth-child(3) td { background-color: #f0e9c5; } :nth-child
  37. 37. :nth-child
  38. 38. http://css-tricks.com/how-nth-child-works/ tr:nth-child(2n+1) td { background-color: #f0e9c5; } :nth-child 2n+1 is the same as odd.
  39. 39. 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. :nth-of-type
  40. 40. p:nth-of-type(odd) { background-color: #f0e9c5; } :nth-of-type
  41. 41. :nth-of-type
  42. 42. matches an element if it is the only child element of it’s parent. :only-child
  43. 43. li { list-style-type: disc; } li:only-child { list-style-type: none; } :only-child
  44. 44. :only-child
  45. 45. matches an element if it is empty :empty
  46. 46. p { padding: 0 0 1em 0; margin: 0; } p:empty { padding: 0; } :empty
  47. 47. pseudo-classes for use with forms. UI Element States
  48. 48. the checked state of a checkbox or radio button :checked
  49. 49. .agreeterms:checked { border:2px solid blue; } :checked
  50. 50. detecting input element states enabled and disabled
  51. 51. input:enabled { color: #000; } :enabled
  52. 52. input:disabled { color: #999; } :disabled
  53. 53. http://dev.w3.org/csswg/css-ui-3/
 (latest editor’s draft) The CSS3 Basic User Interface Module
  54. 54. :default
 :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write CSS3 User Interface Module
  55. 55. <input type="text" name="fName" id="fName" required="required" /> <input type="email" name="fEmail" id="fEmail" required="required" placeholder="name@example.co m" /> HTML5 attributes
  56. 56. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no- repeat; } Adding an icon to required fields
  57. 57. Adding an icon to required fields
  58. 58. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no- repeat; } Adding an icon to valid fields
  59. 59. Adding an icon to valid fields
  60. 60. input[type="email"]:focus:required:invalid { background-image: url(email_error.png); } Show a different icon for the field type
  61. 61. Show a different icon for the field type
  62. 62. :not(selector) the Negation pseudo-class
  63. 63. <p> ... </p> <p class="box"> ... </p> <p> ... </p> :not
  64. 64. p:not(.box) { padding: 1em; border:2px solid #000; } :not
  65. 65. :not
  66. 66. matching virtual elements that don’t explicitly exist in the document tree Pseudo-elements
  67. 67. What is a pseudo-element? Pseudo-element selectors act as if a new element, such as a span, was added to your document and then the style applied to that.
  68. 68. the first character of the first line of text :first-letter
  69. 69. .wrapper:first-letter { font-size: 200%; font-weight: bold; color: red; } :first-letter
  70. 70. :first-letter
  71. 71. the first formatted line of text :first-line
  72. 72. .wrapper:first-line { font-size: 200%; font-weight: bold; color: red; } :first-line
  73. 73. :first-line
  74. 74. Render content before the element when using generated content :before
  75. 75. <div class="content"> ... </ div> :before
  76. 76. .content:before { content: "Start here:"; } :before
  77. 77. :before
  78. 78. Render content after the element when using generated content :after
  79. 79. .content:after { content: "End here:"; } :after
  80. 80. Generated content can be very useful...
  81. 81. CSS Arrow Please
  82. 82. .clr:after { content: ""; display: table; clear: both; } Clear Fix
  83. 83. Generated Content is used in ebook creation. @page:right{ @bottom-left { margin: 10pt 0 30pt 0; content: "My Book Title"; font-size: 8pt; color: #000; } }
  84. 84. Combining selectors to target elements Combinators
  85. 85. Select all elements that are descendants of a specified parent Descendant Selector
  86. 86. .wrapper p { font-size: 1.5em; } Descendant Selector
  87. 87. Select all elements that are immediate children of a specified parent Child Selector
  88. 88. <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
  89. 89. li { color: #000; } ul > li { color: red; } Child Selector
  90. 90. Child Selector
  91. 91. Select elements that are the adjacent siblings of an element Adjacent Sibling
  92. 92. .wrapper h1 + p { font-size: 1.5em; } Adjacent Sibling
  93. 93. Adjacent Sibling
  94. 94. Select elements that are the siblings of an element General Sibling
  95. 95. .wrapper h2~p { color: red; } General Sibling
  96. 96. General Sibling
  97. 97. Browser Support
  98. 98. Browser Support
  99. 99. or serve a simpler layout to older browsers Do Nothing.
  100. 100. plugging the holes in support CSS “PolyFills”
  101. 101. 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/ What is a polyfill?
  102. 102. http://selectivizr.com/ selectivizr
  103. 103. Check your stats.
  104. 104. Selectors Level 4 a look to the near future with “CSS4 Selectors”
  105. 105. the Negation Pseudo-class :not gets an upgrade in Level 4
  106. 106. :not Level 4 enables the passing of multiple selectors to :not p:not(.excerpt, .intro) { font-weight: normal; }
  107. 107. The Matches pseudo-class Applying rules to groups of selectors.
  108. 108. :matches p:matches(.alert,.error,.war n) { color: red; }
  109. 109. Time Dimensional Pseudo-classes Defines :current :past and :future - useful to show progress through a document, for example when displaying subtitles.
  110. 110. :current :past p:current { color: blue; } p:past { color: #999; }
  111. 111. Grid Structural Selectors Column Combinator Pseudo-classes: :nth-column, :nth-last-column
  112. 112. Column Combinator The column combinator, which consists of two pipes (||) represents the relationship of a column element to a cell element belonging to the column it represents.
  113. 113. Column Combinator col.totals || td { background: #333; color: #fff; font-weight: bold; } <table> <col span="2"> <col class="totals"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>3</td> <td>3</td> <td>6</td> </tr> </table>
  114. 114. nth-column, nth-last-column Selects the table cells inside a column according to the columns selected by nth-column or nth- last-column.
  115. 115. Grid Structural Pseudo-Classes :nth-column(even) { background: blue; }
  116. 116. Selector Profiles • CSS Selectors Level 4 introduces selector profiles • The fast profile is suitable for all contexts, including in browser processing • The complete profile is for things that can be used when performance isn’t an issue • http://dev.w3.org/csswg/selectors-4/#profiles
  117. 117. The has() selector • Currently the only selector not available in the fast profile. • This may change as the specification develops. • Takes a selector list as an argument and will match if any of those selectors would match one element.
  118. 118. Any a elements that contain an image will get a black border. a:has( > img ) { border: 1px solid #000; }
  119. 119. If an li does not contain a paragraph. li:not(:has(p)) { padding-bottom: 1em; }
  120. 120. CSS Level 4 selectors Browsers are beginning to implement these selectors. See what your browser supports:
 http://css4-selectors.com/browser-selector-test/
  121. 121. http://www.rachelandrew.co.uk/presentations/css3-selectors @rachelandrew Thank You!

×