CSS Selectors 101-199 - Speaker Deck

Slide 1

Slide 1 text

L U L L A B O T + F R O N T E N D A W E S O M E L U L L A B O T + F R O N T E N D A W E S O M E { 1 M I K E H E R C H E L } CSS Selectors 101++ @ M I K E H E R C H E L

Slide 2

Slide 2 text

L U L L A B O T + F R O N T E N D A W E S O M E 2

Slide 3

Slide 3 text

L U L L A B O T + F R O N T E N D A W E S O M E 3

Slide 4

Slide 4 text

L U L L A B O T + F R O N T E N D A W E S O M E 4

Slide 5

Slide 5 text

L U L L A B O T + F R O N T E N D A W E S O M E What We'll Cover ⭑ Memes ⭑ What are we trying to solve? ⭑ Basic level selectors ⭑ Combining selectors ⭑ Chaining ⭑ Pseudo-elements ⭑ Pseudo-classes ⭑ Some cool (and weird) recipes 5

Slide 6

Slide 6 text

L U L L A B O T + F R O N T E N D A W E S O M E ”CSS is easy. It's just a few thousand key value pairs that have quirks in each browser that you have to memorize. — Dave Rupert 6

Slide 7

Slide 7 text

L U L L A B O T + F R O N T E N D A W E S O M E L U L L A B O T + C L I E N T 7 100 fucking slides

Slide 8

Slide 8 text

L U L L A B O T + F R O N T E N D A W E S O M E 8 (had to add this one in)

Slide 9

Slide 9 text

L U L L A B O T + F R O N T E N D A W E S O M E 9 L U L L A B O T + F R O N T E N D A W E S O M E Memes

Slide 10

Slide 10 text

L U L L A B O T + F R O N T E N D A W E S O M E 10

Slide 11

Slide 11 text

L U L L A B O T + F R O N T E N D A W E S O M E 11

Slide 12

Slide 12 text

L U L L A B O T + F R O N T E N D A W E S O M E 12

Slide 13

Slide 13 text

L U L L A B O T + F R O N T E N D A W E S O M E 13

Slide 14

Slide 14 text

L U L L A B O T + F R O N T E N D A W E S O M E 14

Slide 15

Slide 15 text

L U L L A B O T + F R O N T E N D A W E S O M E 15

Slide 16

Slide 16 text

L U L L A B O T + F R O N T E N D A W E S O M E 16 Tada! Mike Herchel Senior Front-end Developer at Lullabot @mikeherchel

Slide 17

Slide 17 text

L U L L A B O T + F R O N T E N D A W E S O M E 17 L U L L A B O T + F R O N T E N D A W E S O M E Deﬁne the problem

Slide 18

Slide 18 text

L U L L A B O T + F R O N T E N D A W E S O M E 18

Our Science
Lab Research Programs

Slide 19

Slide 19 text

L U L L A B O T + F R O N T E N D A W E S O M E 19 .text-align-center { text-align: center; } .user-login-form input[type="submit"] { background-color: #01639a; color: #fff; height: 54px; padding-left: 27px; padding-right: 27px; } .user-login-form input[type="submit"]:hover, .user-login-form input[type="submit"]:focus { background-color: #024062; } .user-login-form input[type="submit"]:active { background-color: #002337; }

Slide 20

Slide 20 text

L U L L A B O T + F R O N T E N D A W E S O M E 20

Slide 21

Slide 21 text

L U L L A B O T + F R O N T E N D A W E S O M E 21

Slide 22

Slide 22 text

L U L L A B O T + F R O N T E N D A W E S O M E 22

Our Science
Lab Research Programs

Slide 23

Slide 23 text

L U L L A B O T + F R O N T E N D A W E S O M E .text-align-center { text-align: center; } .user-login-form input[type="submit"] { background-color: #01639a; color: #fff; height: 54px; padding-left: 27px; padding-right: 27px; } .user-login-form input[type="submit"]:hover, .user-login-form input[type="submit"]:focus { background-color: #024062; } .user-login-form input[type="submit"]:active { background-color: #002337; } CSS selectors

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

L U L L A B O T + F R O N T E N D A W E S O M E if (!Drupal.unobtainium.settings.subMenuProcessed && subNav !== null) { const button = subNav.querySelector('.subnav__button'); const subNavInner = subNav.querySelector('.subnav__inner'); const activeClass = 'js-active'; function isSubNavOpen() { return subNavInner.classList.contains(activeClass); } 26 CSS selectors in JavaScript

Slide 27

Slide 27 text

L U L L A B O T + F R O N T E N D A W E S O M E Deﬁnitions ⭑ HTML / Markup ⭑ Element / DOM node ⭑ CSS / Stylesheet ⭑ Attribute ⭑ Class ⭑ ID 27

Slide 28

Slide 28 text

L U L L A B O T + F R O N T E N D A W E S O M E An element (aka node) 28 Our Science ID Class Attribute value Attribute

Slide 29

Slide 29 text

L U L L A B O T + F R O N T E N D A W E S O M E 29 L U L L A B O T + F R O N T E N D A W E S O M E Basic Selectors

Slide 30

Slide 30 text

L U L L A B O T + F R O N T E N D A W E S O M E Element selector 30 li { break-inside: avoid; } Note lack of preceding period or hash. This selects all

elements.

Slide 31

Slide 31 text

L U L L A B O T + F R O N T E N D A W E S O M E 31

Our Science
Lab Research Programs

Slide 32

Slide 32 text

L U L L A B O T + F R O N T E N D A W E S O M E Class selector 32 .mega-submenu { font-weight: 700; letter-spacing: .05em; column-count: 2; } Period (.) designates the selector as an class. Note the period is not present in the HTML. This selects all elements that have a class of “mega-submenu”.

Slide 33

Slide 33 text

L U L L A B O T + F R O N T E N D A W E S O M E 33

Our Science
Lab Research Programs

Slide 34

Slide 34 text

L U L L A B O T + F R O N T E N D A W E S O M E ID selector 34 #primary-nav-our-science { display: flex; align-items: center; } Hash (#) designates the selector as an ID. Note the hash is not present in the HTML. This selects all elements with an ID of “primary-nav-our-science”. Note that IDs should be unique.

Slide 35

Slide 35 text

L U L L A B O T + F R O N T E N D A W E S O M E 35

Our Science
Lab Research Programs

Slide 36

Slide 36 text

L U L L A B O T + F R O N T E N D A W E S O M E Attribute selector 36 [aria-expanded] { color: #434251; } Square brackets selects elements that have the matching attribute. This selects all elements that have an “aria-expanded” attribute.

Slide 37

Slide 37 text

L U L L A B O T + F R O N T E N D A W E S O M E 37

Our Science
Lab Research Programs

Slide 38

Slide 38 text

L U L L A B O T + F R O N T E N D A W E S O M E Attribute selector with value 38 [aria-expanded="true"] { color: #434251; } Matches both the attribute and its value. This selects all elements that have an “aria-expanded” attribute set to “true”.

Slide 39

Slide 39 text

L U L L A B O T + F R O N T E N D A W E S O M E 39

Our Science
Lab Research Programs

Slide 40

Slide 40 text

L U L L A B O T + F R O N T E N D A W E S O M E Attribute selector that starts with value 40 [href^="https"] { color: #434251; } Carrot (^) will match when value of attribute starts with the the value that’s in quotes. This selects all elements that have an “href” attribute, whose value begins with “https”.

Slide 41

Slide 41 text

L U L L A B O T + F R O N T E N D A W E S O M E Attribute selector that ends with value 41 [href$="pdf"] { color: #434251; } Dollar ($) will match when value of attribute ends with the the value that’s in quotes. This selects all elements that have an “href” attribute, whose value ends with “pdf”.

Slide 42

Slide 42 text

L U L L A B O T + F R O N T E N D A W E S O M E Attribute selector that contains value 42 [href*="this-text"] { color: #434251; } Asterisk (*) will match when value of attribute contains with the the value that’s in quotes.

Slide 43

Slide 43 text

L U L L A B O T + F R O N T E N D A W E S O M E Can you use attribute selectors in place of class or ID selectors? 43 [class="mega-submenu"] { font-weight: 700; letter-spacing: .05em; column-count: 2; }

Slide 44

Slide 44 text

L U L L A B O T + F R O N T E N D A W E S O M E Universal selector 44 * { box-sizing: border-box; } Selects all elements… ever.

Slide 45

Slide 45 text

L U L L A B O T + F R O N T E N D A W E S O M E 45 L U L L A B O T + F R O N T E N D A W E S O M E Combining Selectors

Slide 46

Slide 46 text

L U L L A B O T + F R O N T E N D A W E S O M E Descendent selector 46 #primary-nav-our-science .mega-submenu a { position: relative; } Space in between selectors will select all instances of the last selector that has the corresponding parent selectors. This selector selects all elements that have a parent who has a class of “mega-submenu”... who are nested under any element that has an ID of “primary-nav-our-science”.

Slide 47

Slide 47 text

L U L L A B O T + F R O N T E N D A W E S O M E 47

Our Science
Lab Research Programs

Slide 48

Slide 48 text

L U L L A B O T + F R O N T E N D A W E S O M E Direct child selector 48 .flex > li { position: relative; } Greater-than symbol in between selectors will select all instances of the last selector that is a direct child of the selector preceding the greater-than symbol.

Slide 49

Slide 49 text

L U L L A B O T + F R O N T E N D A W E S O M E 49

Our Science
Lab Research Programs

Slide 50

Slide 50 text

L U L L A B O T + F R O N T E N D A W E S O M E General sibling selector 50 .my-class ~ li { position: relative; } The tilde (~) will select all elements that are siblings and appear subsequent to the previous selector (before the tilde). This will select any

elements that are siblings and subsequent to an element that has a class of “my-class”.

Slide 51

Slide 51 text

L U L L A B O T + F R O N T E N D A W E S O M E 51

Our Science
Lab Research Programs

Slide 52

Slide 52 text

L U L L A B O T + F R O N T E N D A W E S O M E Adjacent sibling selector 52 .my-class + li { position: relative; } The plus (+) will select the very next element that is a sibling. This will select a

element if it is directly subsequent to an element that has a class of “my-class”.

Slide 53

Slide 53 text

L U L L A B O T + F R O N T E N D A W E S O M E 53

Our Science
Lab Research Programs

Slide 54

Slide 54 text

L U L L A B O T + F R O N T E N D A W E S O M E 54 L U L L A B O T + F R O N T E N D A W E S O M E Chaining Selectors

Slide 55

Slide 55 text

L U L L A B O T + F R O N T E N D A W E S O M E Chain selectors by omitting spaces 55 ul.flex { position: relative; } Note the lack of space preceding the period. This selects all

elements with a class of “flex”.

Slide 56

Slide 56 text

L U L L A B O T + F R O N T E N D A W E S O M E 56

Our Science
Lab Research Programs

Slide 57

Slide 57 text

L U L L A B O T + F R O N T E N D A W E S O M E Chaining selectors 57 button.btn--primary[type="submit"] { position: relative; } This selects all button elements that have a CSS class of “btn--primary” and a “type” attribute that is set to “submit”.

Slide 58

Slide 58 text

L U L L A B O T + F R O N T E N D A W E S O M E Chaining selectors 58 button.form-item.btn--primary[type="submit"] { position: relative; } This selects all button elements that have ● CSS class of “form-item” ● CSS class of “btn--primary” ● “type” attribute that is set to “submit”.

Slide 59

Slide 59 text

L U L L A B O T + F R O N T E N D A W E S O M E Chaining selectors 59 button.form-item.btn--primary[type="submit"][aria-expanded="false"] { position: relative; } This selects all button elements that have ● CSS class of “form-item” ● CSS class of “btn--primary” ● “type” attribute that is set to “submit” ● “aria-expanded” attribute that is set to “false”

Slide 60

Slide 60 text

L U L L A B O T + F R O N T E N D A W E S O M E Combining selectors 60 section.bg-gray-10 .card--publication, section.bg-blue-20 .card--publication, section.bg-gradient-blue .card--publication { background-color: #fff; } Combine selectors with a comma (,).

Slide 61

Slide 61 text

L U L L A B O T + F R O N T E N D A W E S O M E 61 L U L L A B O T + F R O N T E N D A W E S O M E Pseudo-elements

Slide 62

Slide 62 text

L U L L A B O T + F R O N T E N D A W E S O M E 62

Slide 63

Slide 63 text

L U L L A B O T + F R O N T E N D A W E S O M E 63

Slide 64

Slide 64 text

L U L L A B O T + F R O N T E N D A W E S O M E 64 ::before and ::after pseudo-elements enable you to insert DOM nodes at the beginning and ending of elements*. * Most elements

Slide 65

Slide 65 text

L U L L A B O T + F R O N T E N D A W E S O M E 65 :before == ::before :after == ::after Stylistic

Slide 66

Slide 66 text

L U L L A B O T + F R O N T E N D A W E S O M E Creating :before and :after elements 66 button:after { content: "→"; } The content property must be used to instantiate the element. Note that any text placed in this is not visible to screen readers.

Slide 67

Slide 67 text

L U L L A B O T + F R O N T E N D A W E S O M E Common use cases for :before and :after ⭑ Insert decorative text ⭑ Insert an image (by giving the it a size and background image) ⭑ Give it a shape and style it 67

Slide 68

Slide 68 text

L U L L A B O T + F R O N T E N D A W E S O M E Example use case 68 ● The “Play” icon is a :before pseudo-element styled to be a triangle. ● The “Pause” icon is the same transparent :before pseudo-element with border-left and border-right set. https://lullabot.com/podcasts

Slide 69

Slide 69 text

L U L L A B O T + F R O N T E N D A W E S O M E Other useful pseudo-elements ⭑ :first-letter ⭑ :first-line ⭑ :placeholder ⭑ :selection More at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements 69

Slide 70

Slide 70 text

L U L L A B O T + F R O N T E N D A W E S O M E 70 L U L L A B O T + F R O N T E N D A W E S O M E “State” Pseudo-classes

Slide 71

Slide 71 text

L U L L A B O T + F R O N T E N D A W E S O M E Hover state 71 :hover { background-color: red; } This selects all elements when in a hover state. Every element will turn red on hover.

Slide 72

Slide 72 text

L U L L A B O T + F R O N T E N D A W E S O M E Hover state 72 .my-button:hover { background-color: red; } This selects the element that has a “my-button” class when the element is hovered over.

Slide 73

Slide 73 text

L U L L A B O T + F R O N T E N D A W E S O M E Focus state 73 .my-button:focus { background-color: red; } This selects the element that has a “my-button” class, when the element has focus.

Slide 74

Slide 74 text

L U L L A B O T + F R O N T E N D A W E S O M E Focus-within state 74 .my-menu:focus-within { display: block; } This selects the element that has a “my-menu” class, when any element inside of this element has focus.

Slide 75

Slide 75 text

L U L L A B O T + F R O N T E N D A W E S O M E Checked state 75 input[type="checkbox"]:checked { border: solid 2px red; } This selects any input element that has a type attribute that is set to “checkbox”, and is checked.

Slide 76

Slide 76 text

L U L L A B O T + F R O N T E N D A W E S O M E Other useful state selectors ⭑ :active ⭑ :disabled ⭑ :visited More at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes 76

Slide 77

Slide 77 text

L U L L A B O T + F R O N T E N D A W E S O M E 77 L U L L A B O T + F R O N T E N D A W E S O M E “Selector” Pseudo-classes

Slide 78

Slide 78 text

L U L L A B O T + F R O N T E N D A W E S O M E :not() 78 .cards--border-blue:not(.is-active) { border-color: #eeb41e; } Selects the opposite of what is in the parenthesis. This selector is looking elements that have the “cards--border-blue” class but do not have the “is-active” class.

Slide 79

Slide 79 text

L U L L A B O T + F R O N T E N D A W E S O M E :not() 79 .cards--border-blue:not(:focus) { border-color: #eeb41e; } This selector is looking elements that have the “cards--border-blue” class are not in focus.

Slide 80

Slide 80 text

L U L L A B O T + F R O N T E N D A W E S O M E :ﬁrst-child and :last-child 80 .mega-submenu li:last-child a { border-color: #eeb41e; } Selects the first or last sibling element. This particular selector will select an tag that appears under a

that is also the last element under its parent, which is under a “menu-submenu” class.

Slide 81

Slide 81 text

L U L L A B O T + F R O N T E N D A W E S O M E 81

Our Science
Lab Research Programs

Slide 82

Slide 82 text

L U L L A B O T + F R O N T E N D A W E S O M E :ﬁrst-child and :last-child 82 .mega-submenu li:not(:last-child) { margin-bottom: 27px; } Selects the first or last element under an element. This particular ruleset will select all of the

tags that are under the “menu-submenu” class — except for the last one, and add a bottom margin to it.

Slide 83

Slide 83 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-child(even) and :nth-child(odd) 83 tbody tr:nth-child(even) { background: #eee; } Selects the even or odd numbered elements. This particular selector creates a “zebra stripe” pattern and which makes alternate table rows have a light background color.

Slide 84

Slide 84 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-child(x) 84 .mega-submenu li:nth-child(2) { border-color: #eeb41e; } Selects the specific nth element. This particular selector will select the 2nd

tag under its parent, if it is under an element with a “menu-submenu” class.

Slide 85

Slide 85 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-child(xn) 85 .mega-submenu li:nth-child(4n) { border-color: #eeb41e; } Selects every xth element. This particular selector will select every 4th

tag under its parent, if it is under an element with a “menu-submenu” class.

Slide 86

Slide 86 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-child(xn + y) 86 .mega-submenu li:nth-child(4n + 1) { border-color: #eeb41e; } Selects every xth element, but moving up y position(s). This particular selector will select every 4th

tag under its parent starting moving one position up.

Slide 87

Slide 87 text

L U L L A B O T + F R O N T E N D A W E S O M E 87 https://codepen.io/mherchel/pen/NWPLvoq

Slide 88

Slide 88 text

L U L L A B O T + F R O N T E N D A W E S O M E :only-child 88 .mega-submenu li:only-child { border-color: #eeb41e; } Selects the element under .mega-submenu if it is the only child of its parent.

Slide 89

Slide 89 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-last-child() 89 .mega-submenu li:nth-last-child(4n + 1) { border-color: #eeb41e; } Selects every xth element from the end, but moving up y position(s). This particular selector will select every 4th

tag under its parent starting from the end moving one position up.

Slide 90

Slide 90 text

L U L L A B O T + F R O N T E N D A W E S O M E :nth-of-type() 90 .mega-submenu li:nth-of-type(4n + 1) { border-color: #eeb41e; } Selects every xth element of the specified type, but moving up y position(s). This particular selector will select every 4th

tag under its parent starting moving one position up.

Slide 91

Slide 91 text

L U L L A B O T + F R O N T E N D A W E S O M E :only-of-type 91 .mega-submenu li:only-of-type { border-color: #eeb41e; } Selects the element of the same type under .mega-submenu if it is the only child of the same type under its parent.

Slide 92

Slide 92 text

L U L L A B O T + F R O N T E N D A W E S O M E :last-of-type() 92 .mega-submenu li:last-of-type(2) { border-color: #eeb41e; } Matches elements of a given type, based on their position among a group of siblings, counting from the end.

Slide 93

Slide 93 text

L U L L A B O T + F R O N T E N D A W E S O M E :empty 93 .mega-submenu li:empty { border-color: #eeb41e; } Matches elements that do not have any text, white space, or HTML comments.

Slide 94

Slide 94 text

L U L L A B O T + F R O N T E N D A W E S O M E 94 L U L L A B O T + F R O N T E N D A W E S O M E Cool recipes

Slide 95

Slide 95 text

L U L L A B O T + F R O N T E N D A W E S O M E Add icon to end of links that are email address 95 a[href^="mailto"]:after { content: "✉"; /* Unicode envelope. */ margin-left: 3px; }

Slide 96

Slide 96 text

L U L L A B O T + F R O N T E N D A W E S O M E Add icon to end of links that are PDFs 96 a[href$="pdf"]:after { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url('/images/pdf-icon.svg') no-repeat center; margin-left: 3px; }

Slide 97

Slide 97 text

L U L L A B O T + F R O N T E N D A W E S O M E Quantity selector 97 .my-parent > *:first-child:nth-last-child(4), .my-parent > *:first-child:nth-last-child(4) ~ * { /* This only selects elements if there's exactly 4 siblings. */ }

Slide 98

Slide 98 text

L U L L A B O T + F R O N T E N D A W E S O M E Multiple selector 98 .my-parent > *:first-child:nth-last-child(4n), .my-parent > *:first-child:nth-last-child(4n) ~ * { /* Selects elements if there's a multiple of 4 siblings. */ }

Slide 99

Slide 99 text

L U L L A B O T + F R O N T E N D A W E S O M E Only show element when checkbox is checked 99 .my-menu-container { display: none; } .my-checkbox:checked ~ .my-menu-container { display: block; }

Slide 100

Slide 100 text

L U L L A B O T + F R O N T E N D A W E S O M E 100 Tada! Mike Herchel Senior Front-end Developer at Lullabot @mikeherchel

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Lab Research Programs

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Lab Research Programs

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Lab Research Programs

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Lab Research Programs

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Lab Research Programs

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Lab Research Programs