CSS3 Selectors - ConFoo 2014

My talk on CSS3 Selectors - with a bit of bonus info on the Level 4 Selectors Module.

Transcript

1. Rachel Andrew: ConFoo 2014 CSS3 Selectors Thursday, 27 February 14
2. what do we mean by CSS3? Thursday, 27 February 14
3. CSS3 is Modular Thursday, 27 February 14
4. Some CSS3 modules are more complete than others Thursday, 27 February 14
5. • Working Draft • Candidate Recommendation • Proposed Recommendation • W3C Recommendation W3C Maturity Levels Thursday, 27 February 14
6. Some browsers and some (parts of) modules. CSS3 is supported by browsers Thursday, 27 February 14
7. • W3C Recommendation • http://www.w3.org/TR/css3-selectors/ Selectors module Thursday, 27 February 14
8. h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors Thursday, 27 February 14
9. The problem with CSS2 selectors Thursday, 27 February 14
10. <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding classes Thursday, 27 February 14
11. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes Thursday, 27 February 14
12. Select elements based on attributes Attribute Selectors Thursday, 27 February 14
13. form input[type="text"] { } form input[type="submit"] { } Attribute Selectors Thursday, 27 February 14
14. Attribute Selectors Thursday, 27 February 14
15. label[for="fContact"] { float: none; width: auto; } Attribute Selectors Thursday, 27 February 14
16. a[href ^="mailto:"] { padding-right: 20px; background-image:url(email.png); background-repeat: no-repeat; background-position: right center; } Attribute Selectors Thursday, 27 February 14
17. Selecting of elements depending on their position Structural pseudo- class selectors Thursday, 27 February 14
18. a:link {} a:visited {} Pseudo-Class Selectors Thursday, 27 February 14
19. a:hover {} a:active {} Dynamic Pseudo- Class Thursday, 27 February 14
20. target an element when it is the first child of a parent element :first-child Thursday, 27 February 14
21. <div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ... </p> </div> :first-child Thursday, 27 February 14
22. :first-child Thursday, 27 February 14
23. .wrapper p { font-size: 1.5em; } :first-child Thursday, 27 February 14
24. .wrapper p:first-child { font-size: 1.5em; } :first-child Thursday, 27 February 14
25. :first-child Thursday, 27 February 14
26. target an element when it is the last child of a parent element :last-child Thursday, 27 February 14
27. :last-child Thursday, 27 February 14
28. .navigation li:last-child { border-bottom: none; } :last-child Thursday, 27 February 14
29. :last-child Thursday, 27 February 14
30. select multiple elements according to their position in the document tree :nth-child Thursday, 27 February 14
31. :nth-child Thursday, 27 February 14
32. tr:nth-child(odd) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February 14
33. :nth-child Thursday, 27 February 14
34. tr:nth-child(3) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February 14
35. :nth-child Thursday, 27 February 14
36. http://css-tricks.com/how-nth-child-works/ tr:nth-child(2n+1) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February 14
37. 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 Thursday, 27 February 14
38. p:nth-of-type(odd) { background-color: #f0e9c5; } :nth-of-type Thursday, 27 February 14
39. :nth-of-type Thursday, 27 February 14
40. matches an element if it is the only child element of it’s parent. :only-child Thursday, 27 February 14
41. li { list-style-type: disc; } li:only-child { list-style-type: none; } :only-child Thursday, 27 February 14
42. :only-child Thursday, 27 February 14
43. matches an element if it is empty :empty Thursday, 27 February 14
44. p { padding: 0 0 1em 0; margin: 0; } p:empty { padding: 0; } :empty Thursday, 27 February 14
45. Structural pseudo-classes for use with forms. For input elements Thursday, 27 February 14
46. the checked state of a checkbox or radio button :checked Thursday, 27 February 14
47. .agreeterms:checked { border:2px solid blue; } :checked Thursday, 27 February 14
48. detecting input element states enabled and disabled Thursday, 27 February 14
49. input:enabled { color: #000; } :enabled Thursday, 27 February 14
50. input:disabled { color: #999; } :disabled Thursday, 27 February 14
51. http://www.w3.org/TR/css3-ui/ (Working Draft) The CSS3 Basic User Interface Module Thursday, 27 February 14
52. :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write CSS3 User Interface Module Thursday, 27 February 14
53. <input type="text" name="fName" id="fName" required="required" /> <input type="email" name="fEmail" id="fEmail" required="required" placeholder="name@example.com" /> HTML5 attributes Thursday, 27 February 14
54. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to required fields Thursday, 27 February 14
55. Adding an icon to required fields Thursday, 27 February 14
56. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to valid fields Thursday, 27 February 14
57. Adding an icon to valid fields Thursday, 27 February 14
58. input[type="email"]:focus:required:invalid { background-image: url(email_error.png); } Show a different icon for the field type Thursday, 27 February 14
59. Show a different icon for the field type Thursday, 27 February 14
60. :not(selector) the Negation pseudo-class Thursday, 27 February 14
61. <p> ... </p> <p class=”box”> ... </p> <p> ... </p> :not Thursday, 27 February 14
62. p:not(.box) { padding: 1em; border:2px solid #000; } :not Thursday, 27 February 14
63. :not Thursday, 27 February 14
64. matching virtual elements that don’t explicitly exist in the document tree Pseudo-elements Thursday, 27 February 14
65. the first character of the first line of text :first-letter Thursday, 27 February 14
66. .wrapper:first-letter { font-size: 200%; font-weight: bold; color: red; } :first-letter Thursday, 27 February 14
67. :first-letter Thursday, 27 February 14
68. the first formatted line of text :first-line Thursday, 27 February 14
69. .wrapper:first-line { font-size: 200%; font-weight: bold; color: red; } :first-line Thursday, 27 February 14
70. :first-line Thursday, 27 February 14
71. Render content before the element when using generated content :before Thursday, 27 February 14
72. <div class=”content”> ... </div> :before Thursday, 27 February 14
73. .content:before { content: "Start here:"; } :before Thursday, 27 February 14
74. :before Thursday, 27 February 14
75. Render content after the element when using generated content :after Thursday, 27 February 14
76. .content:after { content: "End here:"; } :after Thursday, 27 February 14
77. Generated content can be very useful... Thursday, 27 February 14
78. CSS Arrow Please Thursday, 27 February 14
79. Adding a bird Thursday, 27 February 14
80. .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ Clear Fix Thursday, 27 February 14
81. Content selected in browser by the user ::selection Thursday, 27 February 14
82. .wrapper p::selection { background-color: red; } ::selection Thursday, 27 February 14
83. ::selection Thursday, 27 February 14
84. Combining selectors to target elements Combinators Thursday, 27 February 14
85. Select all elements that are descendants of a specified parent Descendant Selector Thursday, 27 February 14
86. .wrapper p { font-size: 1.5em; } Descendant Selector Thursday, 27 February 14
87. Select all elements that are immediate children of a specified parent Child Selector Thursday, 27 February 14
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 Thursday, 27 February 14
89. li { color: #000; } ul > li { color: red; } Child Selector Thursday, 27 February 14
90. Child Selector Thursday, 27 February 14
91. Select elements that are the adjacent siblings of an element Adjacent Sibling Thursday, 27 February 14
92. .wrapper h1 + p { font-size: 1.5em; } Adjacent Sibling Thursday, 27 February 14
93. Adjacent Sibling Thursday, 27 February 14
94. Select elements that are the siblings of an element General Sibling Thursday, 27 February 14
95. .wrapper h2~p { color: red; } General Sibling Thursday, 27 February 14
96. General Sibling Thursday, 27 February 14
97. Browser Support Thursday, 27 February 14
98. Browser Support Thursday, 27 February 14
99. or serve a simpler layout to older browsers Do Nothing. Thursday, 27 February 14
100. Plug the holes in browser support using JavaScript. JavaScript Thursday, 27 February 14
101. 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> jQuery: first-child Thursday, 27 February 14
102. 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> jQuery: nth-child Thursday, 27 February 14
103. plugging the holes in support CSS “PolyFills” Thursday, 27 February 14
104. 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? Thursday, 27 February 14
105. http://selectivizr.com/ selectivizr Thursday, 27 February 14
106. Check your stats. Thursday, 27 February 14
107. Selectors Level 4 a look to the near future with “CSS4 Selectors” Thursday, 27 February 14
108. the Negation Pseudo-class :not gets an upgrade in Level 4 Thursday, 27 February 14
109. :not Level 4 enables the passing of multiple selectors to :not p:not(.excerpt, .intro) { font-weight: normal; } Thursday, 27 February 14
110. The Matches pseudo-class Applying rules to groups of selectors. Thursday, 27 February 14
111. :matches p:matches(.alert,.error,.warn) { color: red; } Thursday, 27 February 14
112. The local-link Pseudo-class Allows an author to style links depending on the visitor’s location in the site. For example to differentiate between local and external links. Thursday, 27 February 14
113. :local-link target links that are in the same document. a:local-link { color: blue; } Thursday, 27 February 14
114. :local-link(0) Links in the same domain - local links. a:local-link(0) { border-bottom: 1px dashed blue; } Thursday, 27 February 14
115. :local-link Page: http://example.com/blog/foo Link A: http://example.com/blog/foo/a-post Link B: http://example.com/blog/bar/a-post a:local-link(1) { color: red; } a:local-link(2) { color: green; } Thursday, 27 February 14
116. Time Dimensional Pseudo-classes Defines :current :past and :future - useful to show progress through a document, for example when displaying subtitles. Thursday, 27 February 14
117. :current :past p:current { color: blue; } p:past { color: #999; } Thursday, 27 February 14
118. Tree Structural Pseudo-classes Taking nth-child to the next level with :nth-match and :nth-last-match Thursday, 27 February 14
119. :nth-match tr:nth-match(even of .active .new) { background-color: yellow; } Thursday, 27 February 14
120. Grid Structural Pseudo-classes :column, :nth-column, :nth-last-column Thursday, 27 February 14
121. Grid Structural Pseudo-Classes :nth-column(even) { background: blue; } Thursday, 27 February 14
122. The “Parent Selector” Identifying the subject of a selector with a ! Thursday, 27 February 14
123. Identifying the subject of the selector <ul> <li><a href=”home”>Home</a></li> <li><a class=”active”>About</a></ li> </ul> ul li a.active { color: blue; } ul li! a.active { border:1px solid blue; } Thursday, 27 February 14
124. CSS Level 4 selectors Browsers are beginning to implement these selectors. See what your browser supports: http://css4-selectors.com/browser-selector-test/ Thursday, 27 February 14
125. http://www.rachelandrew.co.uk/presentations/css3-selectors @rachelandrew Thank You! Thursday, 27 February 14