CSS3 Selectors

Transcript

1. CSS3 Selectors The CSS Summit 2012

2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com

3. What is CSS3?

4. CSS3 is the next version of CSS

5. CSS3 is Modular

6. Some CSS3 modules are more complete than others

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

   Recommendation

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

   of) modules.

9. Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/

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

    Basic Selectors

11. The problem with CSS2 selectors

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

    classes

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

    without adding classes

14. Attribute Selectors Select elements based on attributes

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

    Selectors

16. Attribute Selectors

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

    Selectors

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

    ! background-position: right center; } Attribute Selectors

19. Structural pseudo-class selectors

20. a:link {} a:visited {} Pseudo-Class Selectors

21. a:hover {} a:active {} Dynamic Pseudo-Class

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

    of a parent element

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

    </p> </div> :first-child

24. :first-child

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

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

27. :first-child

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

    of a parent element

29. :last-child

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

31. :last-child

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

    document tree

33. :nth-child

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

35. :nth-child

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

37. :nth-child

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

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.

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

41. :nth-of-type

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

    element of it’s parent.

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

    list-style-type: none; } :only-child

44. :only-child

45. :empty matches an element if it is empty

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

    0; } ! p:empty { ! padding: 0; } :empty

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

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

49. .agreeterms:checked { border:2px solid blue; } :checked

50. enabled and disabled detecting input element states

51. input:enabled { color: #000; } :enabled

52. input:disabled { color: #999; } :disabled

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

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

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

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. Adding an icon to required fields

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

    Adding an icon to valid fields

59. Adding an icon to valid fields

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

    for the field type

61. Show a different icon for the field type

62. the Negation pseudo- class :not(selector)

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

    :not

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

    #000; ! } :not

65. :not

66. Pseudo-elements

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

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

    red; } :first-letter

69. :first-letter

70. :first-line the first formatted line of text

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

    red; } :first-line

72. :first-line

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

74. <div class=”content”> ... </div> :before

75. .content:before { content: "Start here:"; } :before

76. :before

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

78. .content:after { content: "End here:"; } :after

79. Generated content can be very useful...

80. CSS Arrow Please

81. Adding a bird

82. ::selection Content selected in browser by the user

83. .wrapper p::selection {! background-color: red; } ::selection

84. ::selection

85. Combinators Combining selectors to target elements

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

    specified parent

87. .wrapper p { ! font-size: 1.5em; } Descendant Selector

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

    a specified parent

89. <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

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

    { ! color: red; } Child Selector

91. Child Selector

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

    an element

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

    Sibling

94. Adjacent Sibling

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

    element

96. .wrapper h2~p { ! color: red; } General Sibling

97. General Sibling

98. Browser Support

99. Browser Support

100. Your options

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

102. JavaScript Plug the holes in browser support using JavaScript.

103. 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>

104. 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>

105. 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>

106. CSS “PolyFills” plugging the holes in support

107. 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/

108. selectivizr http://selectivizr.com/

109. Check your stats.

110. greenbelt.org.uk

111. IE8

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

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

113. CSS3 Workflow How I approach my projects.

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

     place.

115. CSS3 Workflow Validate.

116. CSS3 Workflow Test & Fix in older browsers

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

     and which kind

118. CSS3 Workflow Test again.

119. Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com