Notes for CSS - Selectors

By Scott Granneman & Jans Carton

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

## Slide 3

http://www.granneman.com

## Slide 10

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

## Slide 13

As of 2018

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], :blank, :nth-child(), :dir(ltr), :drop, :any-link, :lang(en-*), :local-link, :matches(s1, s2, …), :something(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

## 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

## 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

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

## Slide 90

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

## Slide 91

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

## Slide 92

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

## Slide 93

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

## Slide 94

:is() & :where() are apparently being worked on by browsers, but no browser supports anything about :has() (as of 2020-07-02)

main a < img was the old syntax, but the problem was that the key selector — a — wasn’t on the right like every other key selector was. The new syntax — main a:has(> img) — solved the problem by conforming to the syntax of all other key selectors, as now the whole thing is the a with a pseudo-class as part of it.

## Slide 95

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

http://caniuse.com/#feat=css-not-sel-list ← Last checked 2020-06-30

## Slide 99

pseudo-class: visited link, first child, enabled

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

## Slide 102

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

## Slide 103

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

Notice: different width, different words selected!

## Slide 106

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

## Slide 107

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

## Slide 114

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

## Slide 115

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

## Slide 118

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

## Slide 120

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

## Slide 121

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

## Slide 124

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

## Slide 126

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

## Slide 127

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

## Slide 128

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

## Slide 130

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

## Slide 132

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

## Slide 133

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

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

## Slide 134

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

## Slide 138

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

## Slide 143

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

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

## Slide 144

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

## Slide 145

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 146

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

## Slide 147

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

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

## Slide 149

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 150

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

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

## Slide 151

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

## Slide 152

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

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

## Slide 153

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

## Slide 154

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

## Slide 155

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

## Slide 166

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

## Slide 167

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

## Slide 168

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

## Slide 169

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

## Slide 170

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

## Slide 171

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

## Slide 174

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

## Slide 175

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

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

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

## Slide 177

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

## Slide 183

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

## Slide 184

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

## Slide 188

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

## Slide 189

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

## Slide 191

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

## Slide 192

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

## Slide 196

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

## Slide 197

Reference combinator: Selectors Level 4, Editor’s Draft (September 17, 2016). https://drafts.csswg.org/selectors-4/#changes. Accessed September 17, 2016.

## Slide 205

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

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

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

## Slide 206

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

## Slide 209

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

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

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

## Slide 213

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