Presentation given at the CSS Summit 2011

1. CSS3 &
SELECTORS

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
http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels

8. CSS3 IS SUPPORTED BY
BROWSERS
Some browsers and some (parts of) modules.

9. USING CSS3

10. SELECTORS MODULE
W3C Proposed Recommendation
http://www.w3.org/TR/css3-selectors/

11. BASIC SELECTORS
h1 {}
p {}
.thing {}
#uniquething {}
.thing p

12. THE PROBLEM
WITH CSS2
SELECTORS

13. ADDING CLASSES
<h1>My heading</h1>
<p class=”first”> ... </p>
<p> ... </p>

14. CSS3 SELECTORS
“Common sense” new selectors
target elements more precisely without adding
classes

15. STRUCTURAL PSEUDO-
CLASS SELECTORS

16. PSEUDO-CLASS
SELECTORS
a:link {}
a:visited {}

17. DYNAMIC
PSEUDO-CLASS
a:hover {}
a:active {}

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

19. :first-child

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

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

22. :first-child

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

24. :last-child

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

26. :last-child

27. :nth-child
select multiple elements according to their
position in the document tree

28. :nth-child

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

30. :nth-child

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

32. :nth-child

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

34. :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.

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

36. :nth-of-type

37. :only-child
matches an element if it is the only child element
of it’s parent.

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

39. :only-child

40. :empty
matches an element if it is empty

41. :empty
p {
! padding: 0 0 1em 0;
! margin: 0;
}
!
p:empty {
! padding: 0;
}

42. FOR INPUT ELEMENTS
Structural pseudo-classes for use with forms.

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

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

45. ENABLED AND DISABLED
detecting input element states

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

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

48. THE NEGATION PSEUDO-
CLASS
:not(selector)

49. :not
<p> ... </p>
<p class=”box”> ... </p>
<p> ... </p>

50. :not
p:not(.box) {
! padding: 0 0 3em 0;
! margin: 0;
}
!
p.box {
! border:1px solid #000;
! margin: 0 0 2em 0;
}

51. :not

52. PSEUDO-ELEMENTS

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

54. :first-letter
div#wrapper:first-letter {
! font-size: 200%;
! font-weight: bold;
! color: red;
}

55. :first-letter

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

57. :first-line
div#wrapper:first-line {
! font-size: 200%;
! font-weight: bold;
! color: red;
}

58. :first-line

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

60. :before
<div id=”content”> ... </div>

61. :before
#content:before {
content: "Start here:";
}

62. :before

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

64. :after
#content:after {
content: "End here:";
}

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

66. ::selection
div#wrapper p::selection {!
background-color: red;
}

67. ::selection

68. COMBINATORS
Combining selectors to target elements

69. DESCENDANT SELECTOR
Select all elements that are descendants of a
specified parent

70. DESCENDANT SELECTOR
div#wrapper p {
! font-size: 1.5em;
}

71. CHILD SELECTOR
Select all elements that are immediate children of
a specified parent

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

73. CHILD SELECTOR
li {
! color: #000;
}
!
ul > li {
! color: red;
}

74. Child Selector

75. ADJACENT SIBLING
Select elements that are the adjacent siblings of
an element

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

77. Adjacent Sibling

78. GENERAL SIBLING
Select elements that are the siblings of an
element

79. GENERAL SIBLING
div#wrapper h2~p {
! color: red;
}

80. General Sibling

81. ATTRIBUTE SELECTORS
Select elements based on attributes

82. ATTRIBUTE SELECTORS
form input[type="text"] {
}
!
form input[type="submit"] {
}

83. Attribute Selectors

84. ATTRIBUTE SELECTORS
label[for="fContact"] {
! float: none;
! width: auto;
}

85. ATTRIBUTE SELECTORS
a[href ^="mailto:"] {
! ! padding-right: 20px;
! ! background-image:url(email.png);
! ! background-repeat: no-repeat;
! ! background-position: right center;
}

86. BROWSER
SUPPORT

87. Browser Support

88. DOES IT
MATTER?

91. YES, IT
MATTERS.

92. JAVASCRIPT
Plug the holes in browser support using JavaScript.

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

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

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

96. CSS “POLYFILLS”
plugging the holes in support

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

98. SELECTIVIZR
http://selectivizr.com/

99. ECSSTENDER
http://ecsstender.org/

100. CSS3 WORKFLOW
How I approach my projects.

101. CSS3 WORKFLOW
Develop without any polyfill or JavaScript fixes in
place.

102. CSS3 WORKFLOW
Validate.

103. CSS3 WORKFLOW
Test & Fix in older browsers

104. CSS3 WORKFLOW
Decide if you need to use a polyfill and which kind

105. CSS3 WORKFLOW
Test again.

106. THANK YOU!
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com