Notes for CSS - Selectors

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 1

FIXME check all arrows

## Slide 3

http://www.granneman.com

## Slide 9

https://www.w3.org/TR/css3-selectors/ 

## Slide 10

http://www.w3.org/TR/css3-selectors/

## Slide 11

https://www.w3.org/TR/selectors4/ 

Date accurate as of 2020-07-23

## Slide 13

1: type, class, ID, descendant combinator, pseudo classes (:link, :visited, & :active), pseudo-elements (::first-line & ::first-letter) + grouping

2: *, E[foo], E[foo="bar"], E[foo~="bar"], E[foo|="en"], :first-child, :lang(fr), (:active), :hover, :focus, ::before, ::after, E > F, E + F

3: E[foo^="bar"], E[foo$="bar"], E[foo*="bar"], :root, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :indeterminate, :not(s), E ~ F

4: [attribute='value' i], [attribute='value' s], :blank, :nth-child(), :dir(ltr), :any-link, :lang(en-*), :local-link, :is(s1, s2, …), :where(s1, s2, …), :read-only, :read-write, :not(s1, s2, …), :required, :optional, :placeholder-shown, :indeterminate, :valid, :invalid, :user-invalid, :has(), :scope, :in-range, :out-of-range, :nth-col(n), :nth-last-col(n), :current, :past, :future, :default, :focus-within, :focus-visible, :target-within, E || F <https://css4-selectors.com/selectors/>

## Slide 17

Removed or changed since 2018: :drop, :matches(s1, s2, …), :something(s1, s2, …)

## Slide 19

https://www.w3.org/TR/selectors-4/#structure

## Slide 23

pseudo-class: visited link, first child, enabled

pseudo-element: first line, first letter, before, after

## Slide 25

Local Link: :local-link is unsupported as of 2020-06-30

Target Container: :target-within is unsupported as of 2020-06-30

## Slide 26

https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link 

## Slide 27

https://developer.mozilla.org/en-US/docs/Web/CSS/:link 

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited 

## Slide 29

https://developer.mozilla.org/en-US/docs/Web/CSS/:target 

## Slide 30

http://codepen.io/websanity/pen/YwvgYQ?editors=1100

## Slide 31

http://codepen.io/websanity/pen/YwvgYQ?editors=1100

## Slide 32

http://codepen.io/websanity/live/YwvgYQ

## Slide 33

http://codepen.io/websanity/fullpage/YwvgYQ?#dagon

## Slide 34

https://developer.mozilla.org/en-US/docs/Web/CSS/:scope 

## Slide 35

https://caniuse.com/#feat=css-any-link

https://caniuse.com/#feat=mdn-css_selectors_link

https://caniuse.com/#feat=mdn-css_selectors_visited

https://caniuse.com/#feat=mdn-css_selectors_target

https://caniuse.com/#feat=mdn-css_selectors_scope 

## Slide 40

:hover on iOS Safari: https://codepen.io/websanity/pen/JjGLXXb?editors=1100

## Slide 44

http://codepen.io/websanity/pen/qdksh?editors=110 

## Slide 45

http://codepen.io/websanity/pen/qdksh?editors=110

## Slide 46

http://codepen.io/websanity/pen/qdksh?editors=110

## Slide 48

https://codepen.io/websanity/pen/MWKOmGE?editors=1100

## Slide 49

https://codepen.io/websanity/pen/MWKOmGE?editors=1100

## Slide 51

https://codepen.io/websanity/pen/WNrXjPp?editors=1100

## Slide 52

https://codepen.io/websanity/pen/WNrXjPp?editors=1100

## Slide 53

https://codepen.io/websanity/pen/WNrXjPp?editors=1100

## Slide 54

https://caniuse.com/#feat=mdn-css_selectors_hover

https://caniuse.com/#feat=mdn-css_selectors_hover_all_elements 

https://caniuse.com/#feat=mdn-css_selectors_active 

https://caniuse.com/#feat=mdn-css_selectors_focus

https://caniuse.com/#feat=css-focus-within

Safari special :hover actions: https://css-tricks.com/annoying-mobile-double-tap-link-issue/ & https://codepen.io/websanity/pen/JjGLXXb?editors=1100

## Slide 55

https://caniuse.com/#feat=mdn-css_selectors_focus

https://caniuse.com/#feat=css-focus-within

https://caniuse.com/#feat=css-focus-visible 

## Slide 59

Specificity was discussed in the CSS Overview, under The Cascade

## Slide 61

See http://meyerweb.com/eric/css/tests/empty-bare.html for examples

## Slide 62

https://caniuse.com/#feat=mdn-css_selectors_root

https://caniuse.com/#feat=mdn-css_selectors_empty

## Slide 74

http://codepen.io/websanity/pen/sGhek?editors=110

## Slide 76

http://codepen.io/websanity/pen/nIyKt?editors=010 

FIXME re-take screenshot

## Slide 77

https://caniuse.com/#feat=mdn-css_selectors_first-child 

https://caniuse.com/#feat=mdn-css_selectors_last-child 

https://caniuse.com/#feat=mdn-css_selectors_only-child 

https://caniuse.com/#feat=mdn-css_selectors_nth-child 

https://caniuse.com/#feat=mdn-css_selectors_nth-last-child 

## Slide 81

http://codepen.io/websanity/pen/xzJhA?editors=110

## Slide 82

https://caniuse.com/#feat=mdn-css_selectors_nth-of-type 

https://caniuse.com/#feat=mdn-css_selectors_nth-last-of-type 

https://caniuse.com/#feat=mdn-css_selectors_first-of-type 

https://caniuse.com/#feat=mdn-css_selectors_last-of-type 

https://caniuse.com/#feat=mdn-css_selectors_only-of-type

## Slide 83

Nowhere as of 2020-06-30

## Slide 85

  Video/Audio Play State: the :playing and :paused pseudo-classes

## Slide 89

https://codepen.io/websanity/pen/gOWzvLb?editors=0100 

## Slide 90

FIXME

## Slide 92

FIXME 

## Slide 93

https://developer.mozilla.org/en-US/docs/Web/CSS/:is 

## Slide 94

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

FIXME add [class]:not([class~='m-1v1']) from https://rulepop.com/dice-throne/#turns as an example

## Slide 95

http://codepen.io/websanity/pen/JcgIL?editors=110

## Slide 96

https://codepen.io/websanity/pen/JcgIL?editors=1100

## Slide 97

https://codepen.io/websanity/pen/JcgIL?editors=1100

## Slide 98

http://codepen.io/websanity/pen/MeyeyJ?editors=1100

## Slide 99

https://webkit.org/status/#?search=%3Anot

## Slide 100

https://caniuse.com/#feat=css-not-sel-list

## Slide 103

:is()

https://caniuse.com/css-matches-pseudo

https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes 

https://live.browserstack.com/dashboard#os=iOS&os_version=14.0&device_browser=safari&zoom_to_fit=true&full_screen=true&url=www.google.com&speed=1
:where() 

https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes 

https://caniuse.com/mdn-css_selectors_where
:not() https://caniuse.com/#feat=mdn-css_selectors_not 
:not(s,s) http://caniuse.com/#feat=css-not-sel-list ← Last checked 2020-06-30
:has() 

https://caniuse.com/#feat=css-has 

https://drafts.csswg.org/selectors-4/#changes-2018-11 

## Slide 105

:nth-column() & :nth-last-column() renamed: Etemad, Elika J. & Tab Atkins Jr. Selectors Level 4, Editor’s Draft. 17 May 2021, https://drafts.csswg.org/selectors-4/#changes-2013.

## Slide 107

pseudo-class: visited link, first child, enabled

pseudo-element: first line, first letter, before, after

## Slide 110

FIXME

## Slide 112

FIXME

## Slide 113

FIXME

## Slide 115

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line.

## Slide 116

http://codepen.io/websanity/pen/CKqjf?editors=110

## Slide 117

http://codepen.io/websanity/pen/CKqjf?editors=110

Notice: different width, different words selected!

## Slide 120

http://codepen.io/websanity/pen/zeoLa?editors=110

## Slide 121

http://codepen.io/websanity/pen/zeoLa?editors=110

## Slide 128

http://codepen.io/websanity/pen/xoqGl?editors=110

FIXME - space after content:
## Slide 129

https://codepen.io/websanity/pen/ZEQvZbw?editors=1100 

## Slide 132

https://codepen.io/websanity/pen/NWxyLzB?editors=1100 

## Slide 134

https://codepen.io/websanity/pen/BajYqLG?editors=1100

## Slide 135

https://codepen.io/websanity/pen/BajYqLG?editors=1100

## Slide 138

http://codepen.io/websanity/pen/mcoEG?editors=110

## Slide 140

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

## Slide 141

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

FIXME show Wikipedia CSS

## Slide 142

http://codepen.io/websanity/pen/phlEC?editors=110 

## Slide 144

http://www.fileformat.info/info/unicode/char/search.htm 

## Slide 146

FIXME copy & paste unicode character in CSS

## Slide 147

http://codepen.io/websanity/pen/IAdfs?editors=110 

FIXME add screenshot inserting actual Unicode airplane 

## Slide 148

http://caniuse.com/#feat=css-gencontent

http://css-tricks.com/browser-support-pseudo-elements/

## Slide 152

https://drafts.csswg.org/selectors-4/#pseudo-element-states

## Slide 157

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://caniuse.com/#feat=css-sel2 

## Slide 158

http://codepen.io/websanity/pen/hnoKr?editors=110

## Slide 159

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://caniuse.com/#feat=css-sel2 

https://caniuse.com/#feat=mdn-css_selectors_attribute 

## Slide 160

http://codepen.io/websanity/pen/jKbFx?editors=110

## Slide 161

Using class as an attribute selector is silly; instead, just use .flight::after

http://codepen.io/websanity/pen/jKbFx?editors=110

## Slide 163

Of course, if the inline style has !important on it, you’re screwed (Google does this with its custom search engine so you can’t remove its logo via CSS)

http://codepen.io/websanity/pen/MwyOGd?editors=110

## Slide 164

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://caniuse.com/#feat=css-sel2 

## Slide 165

http://codepen.io/websanity/pen/qaCwn?editors=110

## Slide 167

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://caniuse.com/#feat=css-sel2 

## Slide 168

https://caniuse.com/#feat=css-sel2 

## Slide 169

http://codepen.io/websanity/pen/rkcBj?editors=110

## Slide 170

Munroe, Randall. “Regular Expressions”. xkcd (January 10, 2007). http://xkcd.com/208/

## Slide 181

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

## Slide 182

http://codepen.io/websanity/pen/HrAbj?editors=110

## Slide 183

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

## Slide 184

http://codepen.io/websanity/pen/HcGDu?editors=110

## Slide 185

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

## Slide 186

http://codepen.io/websanity/pen/AiFql?editors=110

## Slide 189

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

## Slide 190

https://caniuse.com/#feat=css-sel2

https://caniuse.com/#feat=css-sel3

https://caniuse.com/#feat=css-case-insensitive 

## Slide 192

http://www.w3.org/TR/selectors4/#syntax

## Slide 193

Notice that combinators (space, >, +, ~) are not involved with compound selectors

## Slide 195

Compound selectors are defined in Selectors Level 4, W3C Working Draft, 21 November 21, 2018, https://www.w3.org/TR/selectors-4/#compound; specifically, see https://www.w3.org/TR/selectors-4/#typedef-compound-selector 

## Slide 200

http://codepen.io/websanity/pen/Asbgx?editors=010

## Slide 201

http://codepen.io/websanity/pen/Asbgx?editors=010

## Slide 205

http://codepen.io/websanity/pen/kejHu?editors=100

## Slide 206

http://codepen.io/websanity/pen/kejHu?editors=100

## Slide 208

The name of this selector should really be "Immediate Following Sibling Combinator"

## Slide 209

http://codepen.io/websanity/pen/lGDcK?editors=110

## Slide 213

http://codepen.io/websanity/pen/Iaqec?editors=110

## Slide 214

Reference combinator removed: Etemad, Elika J. & Tab Atkins Jr. Selectors Level 4, Editor’s Draft. 17 May 2021, https://drafts.csswg.org/selectors-4/#changes-2013.

Column combinator: Etemad, Elika J. & Tab Atkins Jr. Selectors Level 4, Editor’s Draft. 17 May 2021, https://drafts.csswg.org/selectors-4/#the-column-combinator. 

## Slide 217

https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

## Slide 218

https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

## Slide 219

https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

## Slide 221

As of 2021-06-16

FIXME: mobile
:is()

https://developer.mozilla.org/en-US/docs/Web/CSS/:is 

https://caniuse.com/mdn-css_selectors_is_forgiving_selector_list 

https://www.chromestatus.com/feature/5445716612743168
:where()

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

https://caniuse.com/mdn-css_selectors_where_forgiving_selector_list 

https://www.chromestatus.com/feature/5445716612743168

## Slide 227

http://dev.w3.org/csswg/selectors4/#relational 

https://developer.mozilla.org/en-US/docs/Web/CSS/:has 

https://caniuse.com/#feat=css-has 

## Slide 228

https://caniuse.com/#feat=css-has

## Slide 231

http://dev.w3.org/csswg/selectors4/#relational 

https://developer.mozilla.org/en-US/docs/Web/CSS/:has 

https://caniuse.com/#feat=css-has 

## Slide 235

See “CSS3 Generated and Replaced Content Module” at http://www.w3.org/TR/css3-content/, in particular http://www.w3.org/TR/css3-content/#wrapping 

Not updated since May 2003 & never implemented by any browsers

## Slide 236

Image: https://www.clipartmax.com/middle/m2i8K9b1G6b1m2Z5_celtic-celtic-knot-border/#