ConFoo: CSS3 Selectors

Transcript

1. CSS3 Selectors Rachel Andrew: ConFoo 2013 Thursday, 28 February 13

2. Thursday, 28 February 13

3. What is CSS3? Thursday, 28 February 13

4. CSS3 is the next version of CSS Thursday, 28 February

   13

5. CSS3 is Modular Thursday, 28 February 13

6. Some CSS3 modules are more complete than others Thursday, 28

   February 13

7. W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C

   Recommendation Thursday, 28 February 13

8. CSS3 is supported by browsers Some browsers and some (parts

   of) modules. Thursday, 28 February 13

9. Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/ Thursday, 28 February 13

10. h1 {} p {} .thing {} #uniquething {} .thing p

    Basic Selectors Thursday, 28 February 13

11. The problem with CSS2 selectors Thursday, 28 February 13

12. <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding

    classes Thursday, 28 February 13

13. CSS3 Selectors “Common sense” new selectors target elements more precisely

    without adding classes Thursday, 28 February 13

14. Attribute Selectors Select elements based on attributes Thursday, 28 February

    13

15. form input[type="text"] { } ! form input[type="submit"] { } Attribute

    Selectors Thursday, 28 February 13

16. Attribute Selectors Thursday, 28 February 13

17. label[for="fContact"] { ! float: none; ! width: auto; } Attribute

    Selectors Thursday, 28 February 13

18. a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat;

    ! background-position: right center; } Attribute Selectors Thursday, 28 February 13

19. Structural pseudo-class selectors Thursday, 28 February 13

20. a:link {} a:visited {} Pseudo-Class Selectors Thursday, 28 February 13

21. a:hover {} a:active {} Dynamic Pseudo-Class Thursday, 28 February 13

22. :first-child target an element when it is the first child

    of a parent element Thursday, 28 February 13

23. <div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ...

    </p> </div> :first-child Thursday, 28 February 13

24. :first-child Thursday, 28 February 13

25. .wrapper p { ! ! font-size: 1.5em; } :first-child Thursday,

    28 February 13

26. .wrapper p:first-child { ! ! font-size: 1.5em; } :first-child Thursday,

    28 February 13

27. :first-child Thursday, 28 February 13

28. :last-child target an element when it is the last child

    of a parent element Thursday, 28 February 13

29. :last-child Thursday, 28 February 13

30. .navigation li:last-child { ! ! border-bottom: none; } :last-child Thursday,

    28 February 13

31. :last-child Thursday, 28 February 13

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

    document tree Thursday, 28 February 13

33. :nth-child Thursday, 28 February 13

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

    28 February 13

35. :nth-child Thursday, 28 February 13

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

    28 February 13

37. :nth-child Thursday, 28 February 13

38. tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://css-tricks.com/how-nth-child-works/

    Thursday, 28 February 13

39. :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. Thursday, 28 February 13

40. p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type Thursday, 28

    February 13

41. :nth-of-type Thursday, 28 February 13

42. :only-child matches an element if it is the only child

    element of it’s parent. Thursday, 28 February 13

43. li { ! list-style-type: disc; } ! li:only-child { !

    list-style-type: none; } :only-child Thursday, 28 February 13

44. :only-child Thursday, 28 February 13

45. :empty matches an element if it is empty Thursday, 28

    February 13

46. p { ! padding: 0 0 1em 0; ! margin:

    0; } ! p:empty { ! padding: 0; } :empty Thursday, 28 February 13

47. For input elements Structural pseudo-classes for use with forms. Thursday,

    28 February 13

48. :checked the checked state of a checkbox or radio button

    Thursday, 28 February 13

49. .agreeterms:checked { border:2px solid blue; } :checked Thursday, 28 February

    13

50. enabled and disabled detecting input element states Thursday, 28 February

    13

51. input:enabled { color: #000; } :enabled Thursday, 28 February 13

52. input:disabled { color: #999; } :disabled Thursday, 28 February 13

53. The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft) Thursday,

    28 February 13

54. :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write Thursday,

    28 February 13

55. <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, 28 February 13

56. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }

    Adding an icon to required fields Thursday, 28 February 13

57. Adding an icon to required fields Thursday, 28 February 13

58. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }

    Adding an icon to valid fields Thursday, 28 February 13

59. Adding an icon to valid fields Thursday, 28 February 13

60. input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon

    for the field type Thursday, 28 February 13

61. Show a different icon for the field type Thursday, 28

    February 13

62. the Negation pseudo- class :not(selector) Thursday, 28 February 13

63. <p> ... </p> <p class=”box”> ... </p> <p> ... </p>

    :not Thursday, 28 February 13

64. p:not(.box) { ! ! padding: 1em; ! ! border:2px solid

    #000; ! } :not Thursday, 28 February 13

65. :not Thursday, 28 February 13

66. Pseudo-elements Thursday, 28 February 13

67. :first-letter the first character of the first line of text

    Thursday, 28 February 13

68. .wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color:

    red; } :first-letter Thursday, 28 February 13

69. :first-letter Thursday, 28 February 13

70. :first-line the first formatted line of text Thursday, 28 February

    13

71. .wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color:

    red; } :first-line Thursday, 28 February 13

72. :first-line Thursday, 28 February 13

73. :before Render content before the element when using generated content

    Thursday, 28 February 13

74. <div class=”content”> ... </div> :before Thursday, 28 February 13

75. .content:before { content: "Start here:"; } :before Thursday, 28 February

    13

76. :before Thursday, 28 February 13

77. :after Render content after the element when using generated content

    Thursday, 28 February 13

78. .content:after { content: "End here:"; } :after Thursday, 28 February

    13

79. Generated content can be very useful... Thursday, 28 February 13

80. CSS Arrow Please Thursday, 28 February 13

81. Adding a bird Thursday, 28 February 13

82. .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, 28 February 13

83. ::selection Content selected in browser by the user Thursday, 28

    February 13

84. .wrapper p::selection {! background-color: red; } ::selection Thursday, 28 February

    13

85. ::selection Thursday, 28 February 13

86. Combinators Combining selectors to target elements Thursday, 28 February 13

87. Descendant Selector Select all elements that are descendants of a

    specified parent Thursday, 28 February 13

88. .wrapper p { ! font-size: 1.5em; } Descendant Selector Thursday,

    28 February 13

89. Child Selector Select all elements that are immediate children of

    a specified parent Thursday, 28 February 13

90. <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, 28 February 13

91. li { ! color: #000; } ! ul > li

    { ! color: red; } Child Selector Thursday, 28 February 13

92. Child Selector Thursday, 28 February 13

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

    an element Thursday, 28 February 13

94. .wrapper h1 + p { ! font-size: 1.5em; } Adjacent

    Sibling Thursday, 28 February 13

95. Adjacent Sibling Thursday, 28 February 13

96. General Sibling Select elements that are the siblings of an

    element Thursday, 28 February 13

97. .wrapper h2~p { ! color: red; } General Sibling Thursday,

    28 February 13

98. General Sibling Thursday, 28 February 13

99. Browser Support Thursday, 28 February 13

100. Browser Support Thursday, 28 February 13

101. Your options Thursday, 28 February 13

102. Do Nothing. or serve a simpler layout to older browsers

     Thursday, 28 February 13

103. JavaScript Plug the holes in browser support using JavaScript. Thursday,

     28 February 13

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

     jQuery: first-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script> Thursday, 28 February 13

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

     jQuery: last-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script> Thursday, 28 February 13

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

     <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script> Thursday, 28 February 13

107. CSS “PolyFills” plugging the holes in support Thursday, 28 February

     13

108. What is a polyfill? 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/ Thursday, 28 February 13

109. selectivizr http://selectivizr.com/ Thursday, 28 February 13

110. Check your stats. Thursday, 28 February 13

111. greenbelt.org.uk Thursday, 28 February 13

112. IE8 Thursday, 28 February 13

113. var patch_css = function() { ! ! // supporting css

     stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css Thursday, 28 February 13

114. CSS3 Workflow How I approach my projects. Thursday, 28 February

     13

115. CSS3 Workflow Develop without any polyfill or JavaScript fixes in

     place. Thursday, 28 February 13

116. CSS3 Workflow Validate. Thursday, 28 February 13

117. CSS3 Workflow Test & Fix in older browsers Thursday, 28

     February 13

118. CSS3 Workflow Decide if you need to use a polyfill

     and which kind Thursday, 28 February 13

119. CSS3 Workflow Test again. Thursday, 28 February 13

120. Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thursday, 28 February 13