Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Thursday, 28 February 13

Slide 3

Slide 3 text

What is CSS3? Thursday, 28 February 13

Slide 4

Slide 4 text

CSS3 is the next version of CSS Thursday, 28 February 13

Slide 5

Slide 5 text

CSS3 is Modular Thursday, 28 February 13

Slide 6

Slide 6 text

Some CSS3 modules are more complete than others Thursday, 28 February 13

Slide 7

Slide 7 text

W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation Thursday, 28 February 13

Slide 8

Slide 8 text

CSS3 is supported by browsers Some browsers and some (parts of) modules. Thursday, 28 February 13

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors Thursday, 28 February 13

Slide 11

Slide 11 text

The problem with CSS2 selectors Thursday, 28 February 13

Slide 12

Slide 12 text

My heading

...

...

Adding classes Thursday, 28 February 13

Slide 13

Slide 13 text

CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes Thursday, 28 February 13

Slide 14

Slide 14 text

Attribute Selectors Select elements based on attributes Thursday, 28 February 13

Slide 15

Slide 15 text

form input[type="text"] { } ! form input[type="submit"] { } Attribute Selectors Thursday, 28 February 13

Slide 16

Slide 16 text

Attribute Selectors Thursday, 28 February 13

Slide 17

Slide 17 text

label[for="fContact"] { ! float: none; ! width: auto; } Attribute Selectors Thursday, 28 February 13

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Structural pseudo-class selectors Thursday, 28 February 13

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

:first-child target an element when it is the first child of a parent element Thursday, 28 February 13

Slide 23

Slide 23 text

...

...

...

:first-child Thursday, 28 February 13

Slide 24

Slide 24 text

:first-child Thursday, 28 February 13

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

:first-child Thursday, 28 February 13

Slide 28

Slide 28 text

:last-child target an element when it is the last child of a parent element Thursday, 28 February 13

Slide 29

Slide 29 text

:last-child Thursday, 28 February 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

:last-child Thursday, 28 February 13

Slide 32

Slide 32 text

:nth-child select multiple elements according to their position in the document tree Thursday, 28 February 13

Slide 33

Slide 33 text

:nth-child Thursday, 28 February 13

Slide 34

Slide 34 text

tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child Thursday, 28 February 13

Slide 35

Slide 35 text

:nth-child Thursday, 28 February 13

Slide 36

Slide 36 text

tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child Thursday, 28 February 13

Slide 37

Slide 37 text

:nth-child Thursday, 28 February 13

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

: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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

:nth-of-type Thursday, 28 February 13

Slide 42

Slide 42 text

:only-child matches an element if it is the only child element of it’s parent. Thursday, 28 February 13

Slide 43

Slide 43 text

li { ! list-style-type: disc; } ! li:only-child { ! list-style-type: none; } :only-child Thursday, 28 February 13

Slide 44

Slide 44 text

:only-child Thursday, 28 February 13

Slide 45

Slide 45 text

:empty matches an element if it is empty Thursday, 28 February 13

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

For input elements Structural pseudo-classes for use with forms. Thursday, 28 February 13

Slide 48

Slide 48 text

:checked the checked state of a checkbox or radio button Thursday, 28 February 13

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

enabled and disabled detecting input element states Thursday, 28 February 13

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write Thursday, 28 February 13

Slide 55

Slide 55 text

! ! HTML5 attributes Thursday, 28 February 13

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Adding an icon to required fields Thursday, 28 February 13

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Adding an icon to valid fields Thursday, 28 February 13

Slide 60

Slide 60 text

input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon for the field type Thursday, 28 February 13

Slide 61

Slide 61 text

Show a different icon for the field type Thursday, 28 February 13

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

...

...

...

:not Thursday, 28 February 13

Slide 64

Slide 64 text

p:not(.box) { ! ! padding: 1em; ! ! border:2px solid #000; ! } :not Thursday, 28 February 13

Slide 65

Slide 65 text

:not Thursday, 28 February 13

Slide 66

Slide 66 text

Pseudo-elements Thursday, 28 February 13

Slide 67

Slide 67 text

:first-letter the first character of the first line of text Thursday, 28 February 13

Slide 68

Slide 68 text

.wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-letter Thursday, 28 February 13

Slide 69

Slide 69 text

:first-letter Thursday, 28 February 13

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

.wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color: red; } :first-line Thursday, 28 February 13

Slide 72

Slide 72 text

:first-line Thursday, 28 February 13

Slide 73

Slide 73 text

:before Render content before the element when using generated content Thursday, 28 February 13

Slide 74

Slide 74 text

...
:before Thursday, 28 February 13

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

:before Thursday, 28 February 13

Slide 77

Slide 77 text

:after Render content after the element when using generated content Thursday, 28 February 13

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

CSS Arrow Please Thursday, 28 February 13

Slide 81

Slide 81 text

Adding a bird Thursday, 28 February 13

Slide 82

Slide 82 text

.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

Slide 83

Slide 83 text

::selection Content selected in browser by the user Thursday, 28 February 13

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

::selection Thursday, 28 February 13

Slide 86

Slide 86 text

Combinators Combining selectors to target elements Thursday, 28 February 13

Slide 87

Slide 87 text

Descendant Selector Select all elements that are descendants of a specified parent Thursday, 28 February 13

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Child Selector Select all elements that are immediate children of a specified parent Thursday, 28 February 13

Slide 90

Slide 90 text

  • Item 1
    1. Sub list item 1
    2. Sub list item 2
  • Item 2
Child Selector Thursday, 28 February 13

Slide 91

Slide 91 text

li { ! color: #000; } ! ul > li { ! color: red; } Child Selector Thursday, 28 February 13

Slide 92

Slide 92 text

Child Selector Thursday, 28 February 13

Slide 93

Slide 93 text

Adjacent Sibling Select elements that are the adjacent siblings of an element Thursday, 28 February 13

Slide 94

Slide 94 text

.wrapper h1 + p { ! font-size: 1.5em; } Adjacent Sibling Thursday, 28 February 13

Slide 95

Slide 95 text

Adjacent Sibling Thursday, 28 February 13

Slide 96

Slide 96 text

General Sibling Select elements that are the siblings of an element Thursday, 28 February 13

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

General Sibling Thursday, 28 February 13

Slide 99

Slide 99 text

Browser Support Thursday, 28 February 13

Slide 100

Slide 100 text

Browser Support Thursday, 28 February 13

Slide 101

Slide 101 text

Your options Thursday, 28 February 13

Slide 102

Slide 102 text

Do Nothing. or serve a simpler layout to older browsers Thursday, 28 February 13

Slide 103

Slide 103 text

JavaScript Plug the holes in browser support using JavaScript. Thursday, 28 February 13

Slide 104

Slide 104 text

div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } jQuery: first-child script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); Thursday, 28 February 13

Slide 105

Slide 105 text

ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } jQuery: last-child script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); Thursday, 28 February 13

Slide 106

Slide 106 text

tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); Thursday, 28 February 13

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

Check your stats. Thursday, 28 February 13

Slide 111

Slide 111 text

greenbelt.org.uk Thursday, 28 February 13

Slide 112

Slide 112 text

IE8 Thursday, 28 February 13

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

CSS3 Workflow Develop without any polyfill or JavaScript fixes in place. Thursday, 28 February 13

Slide 116

Slide 116 text

CSS3 Workflow Validate. Thursday, 28 February 13

Slide 117

Slide 117 text

CSS3 Workflow Test & Fix in older browsers Thursday, 28 February 13

Slide 118

Slide 118 text

CSS3 Workflow Decide if you need to use a polyfill and which kind Thursday, 28 February 13

Slide 119

Slide 119 text

CSS3 Workflow Test again. Thursday, 28 February 13

Slide 120

Slide 120 text

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