My presentation on Level 3 and 4 selectors for ConFoo

1. Rachel Andrew: ConFoo 2015
CSS
Selectors

2. what do we mean by CSS3?

3. CSS3 is Modular

4. CSS3 doesn’t really exist …

5. • Editor’s Draft
• Working Draft
• Candidate Recommendation
• Proposed Recommendation
• W3C Recommendation
W3C Maturity Levels

6. • W3C Recommendation
• http://www.w3.org/TR/selectors/
Selectors module Level 3

7. Selectors Module Level 4
• Latest Editor’s Draft 4 February 2015
• http://dev.w3.org/csswg/selectors-4/

8. h1 {}
p {}
.thing {}
#uniquething {}
.thing p
Basic Selectors

9. The problem with CSS2 selectors

10. <h1>My heading</h1>
<p class="first"> ... </p>
<p> ... </p>
Adding classes

11. Level 3 Selectors
“Common sense” new selectors
target elements more precisely without adding
classes

12. Select elements based on attributes
Attribute Selectors

13. form input[type="text"] {
}
form input[type="submit"] {
}
Attribute
Selectors

14. Attribute Selectors

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

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

17. Selecting of elements depending on their position
Structural pseudo-
class selectors

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. a:link {}
a:visited {}
Pseudo-Class
Selectors

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

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

22. <div class="wrapper">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
:first-child

23. :first-child

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

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

26. :first-child

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. target an element when it is the last child of a
parent element
:last-child

29. :last-child

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

31. :last-child

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

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. 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. 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. p:nth-of-type(odd) {
background-color: #f0e9c5;
}
:nth-of-type

41. :nth-of-type

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

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

44. :only-child

45. matches an element if it is empty
:empty

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

47. pseudo-classes for use with forms.
UI Element States

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

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

50. detecting input element states
enabled and disabled

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

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

53. http://dev.w3.org/csswg/css-ui-3/
(latest editor’s draft)
The CSS3 Basic User
Interface Module

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

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. 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. :not(selector)
the Negation pseudo-class

63. <p> ... </p>
<p class="box"> ... </p>
<p> ... </p>
:not

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

65. :not

66. matching virtual elements that don’t explicitly
exist in the document tree
Pseudo-elements

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. the first character of the first line of text
:first-letter

69. .wrapper:first-letter {
font-size: 200%;
font-weight: bold;
color: red;
}
:first-letter

70. :first-letter

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

72. .wrapper:first-line {
font-size: 200%;
font-weight: bold;
color: red;
}
:first-line

73. :first-line

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

75. <div class="content"> ... </
div>
:before

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

77. :before

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

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

80. Generated content can be very
useful...

81. CSS Arrow Please

82. .clr:after {
content: "";
display: table;
clear: both;
}
Clear Fix

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. Combining selectors to target elements
Combinators

85. Select all elements that are descendants of a
specified parent
Descendant Selector

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

87. Select all elements that are immediate children
of a specified parent
Child Selector

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. li {
color: #000;
}
ul > li {
color: red;
}
Child Selector

90. Child Selector

91. Select elements that are the adjacent siblings of
an element
Adjacent Sibling

92. .wrapper h1 + p {
font-size: 1.5em;
}
Adjacent Sibling

93. Adjacent Sibling

94. Select elements that are the siblings of an
element
General Sibling

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

96. General Sibling

97. Browser Support

98. Browser Support

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

100. plugging the holes in support
CSS “PolyFills”

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. http://selectivizr.com/
selectivizr

103. Check your stats.

104. Selectors Level 4
a look to the near future with “CSS4 Selectors”

105. the Negation Pseudo-class
:not gets an upgrade in Level 4

106. :not
Level 4 enables
the passing of
multiple selectors
to :not
p:not(.excerpt, .intro) {
font-weight: normal;
}

107. The Matches pseudo-class
Applying rules to groups of selectors.

108. :matches
p:matches(.alert,.error,.war
n) {
color: red;
}

109. Time Dimensional Pseudo-classes
Defines :current :past and :future - useful to
show progress through a document, for example
when displaying subtitles.

110. :current
:past
p:current {
color: blue;
}
p:past {
color: #999;
}

111. Grid Structural Selectors
Column Combinator
Pseudo-classes:
:nth-column, :nth-last-column

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. 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. 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. Grid Structural
Pseudo-Classes
:nth-column(even) {
background: blue;
}

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. 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. Any a elements
that contain an
image will get a
black border.
a:has( > img ) {
border: 1px solid #000;
}

119. If an li does not
contain a
paragraph.
li:not(:has(p)) {
padding-bottom: 1em;
}

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. http://www.rachelandrew.co.uk/presentations/css3-selectors
@rachelandrew
Thank You!