Tweet
Tweet

Slide 1

Slide 1 text

Rachel Andrew: ConFoo 2014 CSS3 Selectors Thursday, 27 February 14

Slide 2

Slide 2 text

what do we mean by CSS3? Thursday, 27 February 14

Slide 3

Slide 3 text

CSS3 is Modular Thursday, 27 February 14

Slide 4

Slide 4 text

Some CSS3 modules are more complete than others Thursday, 27 February 14

Slide 5

Slide 5 text

• Working Draft • Candidate Recommendation • Proposed Recommendation • W3C Recommendation W3C Maturity Levels Thursday, 27 February 14

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

• W3C Recommendation • http://www.w3.org/TR/css3-selectors/ Selectors module Thursday, 27 February 14

Slide 8

Slide 8 text

h1 {} p {} .thing {} #uniquething {} .thing p Basic Selectors Thursday, 27 February 14

Slide 9

Slide 9 text

The problem with CSS2 selectors Thursday, 27 February 14

Slide 10

Slide 10 text

My heading

...

...

Adding classes Thursday, 27 February 14

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Select elements based on attributes Attribute Selectors Thursday, 27 February 14

Slide 13

Slide 13 text

form input[type="text"] { } form input[type="submit"] { } Attribute Selectors Thursday, 27 February 14

Slide 14

Slide 14 text

Attribute Selectors Thursday, 27 February 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Selecting of elements depending on their position Structural pseudo- class selectors Thursday, 27 February 14

Slide 18

Slide 18 text

a:link {} a:visited {} Pseudo-Class Selectors Thursday, 27 February 14

Slide 19

Slide 19 text

a:hover {} a:active {} Dynamic Pseudo- Class Thursday, 27 February 14

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

...

...

...

:first-child Thursday, 27 February 14

Slide 22

Slide 22 text

:first-child Thursday, 27 February 14

Slide 23

Slide 23 text

.wrapper p { font-size: 1.5em; } :first-child Thursday, 27 February 14

Slide 24

Slide 24 text

.wrapper p:first-child { font-size: 1.5em; } :first-child Thursday, 27 February 14

Slide 25

Slide 25 text

:first-child Thursday, 27 February 14

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

:last-child Thursday, 27 February 14

Slide 28

Slide 28 text

.navigation li:last-child { border-bottom: none; } :last-child Thursday, 27 February 14

Slide 29

Slide 29 text

:last-child Thursday, 27 February 14

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

:nth-child Thursday, 27 February 14

Slide 32

Slide 32 text

tr:nth-child(odd) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February 14

Slide 33

Slide 33 text

:nth-child Thursday, 27 February 14

Slide 34

Slide 34 text

tr:nth-child(3) td { background-color: #f0e9c5; } :nth-child Thursday, 27 February 14

Slide 35

Slide 35 text

:nth-child Thursday, 27 February 14

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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 Thursday, 27 February 14

Slide 38

Slide 38 text

p:nth-of-type(odd) { background-color: #f0e9c5; } :nth-of-type Thursday, 27 February 14

Slide 39

Slide 39 text

:nth-of-type Thursday, 27 February 14

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

li { list-style-type: disc; } li:only-child { list-style-type: none; } :only-child Thursday, 27 February 14

Slide 42

Slide 42 text

:only-child Thursday, 27 February 14

Slide 43

Slide 43 text

matches an element if it is empty :empty Thursday, 27 February 14

Slide 44

Slide 44 text

p { padding: 0 0 1em 0; margin: 0; } p:empty { padding: 0; } :empty Thursday, 27 February 14

Slide 45

Slide 45 text

Structural pseudo-classes for use with forms. For input elements Thursday, 27 February 14

Slide 46

Slide 46 text

the checked state of a checkbox or radio button :checked Thursday, 27 February 14

Slide 47

Slide 47 text

.agreeterms:checked { border:2px solid blue; } :checked Thursday, 27 February 14

Slide 48

Slide 48 text

detecting input element states enabled and disabled Thursday, 27 February 14

Slide 49

Slide 49 text

input:enabled { color: #000; } :enabled Thursday, 27 February 14

Slide 50

Slide 50 text

input:disabled { color: #999; } :disabled Thursday, 27 February 14

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write CSS3 User Interface Module Thursday, 27 February 14

Slide 53

Slide 53 text

HTML5 attributes Thursday, 27 February 14

Slide 54

Slide 54 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, 27 February 14

Slide 55

Slide 55 text

Adding an icon to required fields Thursday, 27 February 14

Slide 56

Slide 56 text

input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; } Adding an icon to valid fields Thursday, 27 February 14

Slide 57

Slide 57 text

Adding an icon to valid fields Thursday, 27 February 14

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Show a different icon for the field type Thursday, 27 February 14

Slide 60

Slide 60 text

:not(selector) the Negation pseudo-class Thursday, 27 February 14

Slide 61

Slide 61 text

...

...

...

:not Thursday, 27 February 14

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

:not Thursday, 27 February 14

Slide 64

Slide 64 text

matching virtual elements that don’t explicitly exist in the document tree Pseudo-elements Thursday, 27 February 14

Slide 65

Slide 65 text

the first character of the first line of text :first-letter Thursday, 27 February 14

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

:first-letter Thursday, 27 February 14

Slide 68

Slide 68 text

the first formatted line of text :first-line Thursday, 27 February 14

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

:first-line Thursday, 27 February 14

Slide 71

Slide 71 text

Render content before the element when using generated content :before Thursday, 27 February 14

Slide 72

Slide 72 text

...
:before Thursday, 27 February 14

Slide 73

Slide 73 text

.content:before { content: "Start here:"; } :before Thursday, 27 February 14

Slide 74

Slide 74 text

:before Thursday, 27 February 14

Slide 75

Slide 75 text

Render content after the element when using generated content :after Thursday, 27 February 14

Slide 76

Slide 76 text

.content:after { content: "End here:"; } :after Thursday, 27 February 14

Slide 77

Slide 77 text

Generated content can be very useful... Thursday, 27 February 14

Slide 78

Slide 78 text

CSS Arrow Please Thursday, 27 February 14

Slide 79

Slide 79 text

Adding a bird Thursday, 27 February 14

Slide 80

Slide 80 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, 27 February 14

Slide 81

Slide 81 text

Content selected in browser by the user ::selection Thursday, 27 February 14

Slide 82

Slide 82 text

.wrapper p::selection { background-color: red; } ::selection Thursday, 27 February 14

Slide 83

Slide 83 text

::selection Thursday, 27 February 14

Slide 84

Slide 84 text

Combining selectors to target elements Combinators Thursday, 27 February 14

Slide 85

Slide 85 text

Select all elements that are descendants of a specified parent Descendant Selector Thursday, 27 February 14

Slide 86

Slide 86 text

.wrapper p { font-size: 1.5em; } Descendant Selector Thursday, 27 February 14

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

  • Item 1
    1. Sub list item 1
    2. Sub list item 2
  • Item 2
Child Selector Thursday, 27 February 14

Slide 89

Slide 89 text

li { color: #000; } ul > li { color: red; } Child Selector Thursday, 27 February 14

Slide 90

Slide 90 text

Child Selector Thursday, 27 February 14

Slide 91

Slide 91 text

Select elements that are the adjacent siblings of an element Adjacent Sibling Thursday, 27 February 14

Slide 92

Slide 92 text

.wrapper h1 + p { font-size: 1.5em; } Adjacent Sibling Thursday, 27 February 14

Slide 93

Slide 93 text

Adjacent Sibling Thursday, 27 February 14

Slide 94

Slide 94 text

Select elements that are the siblings of an element General Sibling Thursday, 27 February 14

Slide 95

Slide 95 text

.wrapper h2~p { color: red; } General Sibling Thursday, 27 February 14

Slide 96

Slide 96 text

General Sibling Thursday, 27 February 14

Slide 97

Slide 97 text

Browser Support Thursday, 27 February 14

Slide 98

Slide 98 text

Browser Support Thursday, 27 February 14

Slide 99

Slide 99 text

or serve a simpler layout to older browsers Do Nothing. Thursday, 27 February 14

Slide 100

Slide 100 text

Plug the holes in browser support using JavaScript. JavaScript Thursday, 27 February 14

Slide 101

Slide 101 text

div#wrapper p:first-child, div#wrapper p.first { font-size: 1.5em; } $(document).ready(function(){ $("div#wrapper p:first- child").addClass("first"); }); jQuery: first-child Thursday, 27 February 14

Slide 102

Slide 102 text

tr:nth-child(odd) td, td.odd { background-color: #f0e9c5; } $(document).ready(function(){ $("tr:nth-child(odd) td").addClass("odd"); }); jQuery: nth-child Thursday, 27 February 14

Slide 103

Slide 103 text

plugging the holes in support CSS “PolyFills” Thursday, 27 February 14

Slide 104

Slide 104 text

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? Thursday, 27 February 14

Slide 105

Slide 105 text

http://selectivizr.com/ selectivizr Thursday, 27 February 14

Slide 106

Slide 106 text

Check your stats. Thursday, 27 February 14

Slide 107

Slide 107 text

Selectors Level 4 a look to the near future with “CSS4 Selectors” Thursday, 27 February 14

Slide 108

Slide 108 text

the Negation Pseudo-class :not gets an upgrade in Level 4 Thursday, 27 February 14

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

The Matches pseudo-class Applying rules to groups of selectors. Thursday, 27 February 14

Slide 111

Slide 111 text

:matches p:matches(.alert,.error,.warn) { color: red; } Thursday, 27 February 14

Slide 112

Slide 112 text

The local-link Pseudo-class Allows an author to style links depending on the visitor’s location in the site. For example to differentiate between local and external links. Thursday, 27 February 14

Slide 113

Slide 113 text

:local-link target links that are in the same document. a:local-link { color: blue; } Thursday, 27 February 14

Slide 114

Slide 114 text

:local-link(0) Links in the same domain - local links. a:local-link(0) { border-bottom: 1px dashed blue; } Thursday, 27 February 14

Slide 115

Slide 115 text

:local-link Page: http://example.com/blog/foo Link A: http://example.com/blog/foo/a-post Link B: http://example.com/blog/bar/a-post a:local-link(1) { color: red; } a:local-link(2) { color: green; } Thursday, 27 February 14

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

:current :past p:current { color: blue; } p:past { color: #999; } Thursday, 27 February 14

Slide 118

Slide 118 text

Tree Structural Pseudo-classes Taking nth-child to the next level with :nth-match and :nth-last-match Thursday, 27 February 14

Slide 119

Slide 119 text

:nth-match tr:nth-match(even of .active .new) { background-color: yellow; } Thursday, 27 February 14

Slide 120

Slide 120 text

Grid Structural Pseudo-classes :column, :nth-column, :nth-last-column Thursday, 27 February 14

Slide 121

Slide 121 text

Grid Structural Pseudo-Classes :nth-column(even) { background: blue; } Thursday, 27 February 14

Slide 122

Slide 122 text

The “Parent Selector” Identifying the subject of a selector with a ! Thursday, 27 February 14

Slide 123

Slide 123 text

Identifying the subject of the selector
  • Home
  • About li>
ul li a.active { color: blue; } ul li! a.active { border:1px solid blue; } Thursday, 27 February 14

Slide 124

Slide 124 text

CSS Level 4 selectors Browsers are beginning to implement these selectors. See what your browser supports: http://css4-selectors.com/browser-selector-test/ Thursday, 27 February 14

Slide 125

Slide 125 text

http://www.rachelandrew.co.uk/presentations/css3-selectors @rachelandrew Thank You! Thursday, 27 February 14