CSS Selectors 101-199

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

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

L U L L A B O T + F

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

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

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

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)

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

L U L L A B O T + F

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

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

L U L L A B O T + F
R O N T E N D A W E S O M E 18 <header class="site-header container relative pr-0 flex justify-between"> <nav class="primary-nav hidden lg:flex ml-auto"> <ul class="flex"> <li class="flex"> <button class="mega-menu__button" type="button" aria-controls="primary-nav-our-science" aria-expanded="false">Our Science</button> <div id="primary-nav-our-science" class="mega-menu hidden container grid-full bg-blue-50"> <div class="mega-menu__first col-start-1 col-end-9 xl:col-start-2 xl:col-end-10 py-5"> <h3 class="uppercase text--3 leading-1 mb-1 text-gray-40">Lab Research Programs</h3> <ul class="mega-submenu mega-submenu--default" id="block-lab-research-programs"> <li><a href="/cbs">Chemical & Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences & Engineering</a></li> <li><a href="/smds">Simulation, Modeling & Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>

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; }

L U L L A B O T + F

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

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 declarations

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

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

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

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 <button id="my-button" class="mega-menu__button" type="button" aria-controls="primary-nav-our-science" aria-expanded="false">Our Science</button> ID Class Attribute value Attribute

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

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 <li> elements.

L U L L A B O T + F

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”.

L U L L A B O T + F

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.

L U L L A B O T + F

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.

L U L L A B O T + F

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”.

L U L L A B O T + F

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”.

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”.

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.

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; }

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.

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

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 <a> 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”.

L U L L A B O T + F

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.

L U L L A B O T + F

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 <li> elements that are siblings and subsequent to an element that has a class of “my-class”.

L U L L A B O T + F
R O N T E N D A W E S O M E 51 <header class="site-header container relative pr-0 flex justify-between"> <nav class="primary-nav hidden lg:flex ml-auto"> <ul class="flex"> <li class="flex"> <button class="mega-menu__button" type="button" aria-controls="primary-nav-our-science" aria-expanded="false">Our Science</button> <div id="primary-nav-our-science" class="mega-menu hidden container grid-full bg-blue-50"> <div class="mega-menu__first col-start-1 col-end-9 xl:col-start-2 xl:col-end-10 py-5"> <h3 class="uppercase text--3 leading-1 mb-1 text-gray-40">Lab Research Programs</h3> <ul class="mega-submenu mega-submenu--default" id="block-lab-research-programs"> <li><a href="/cbs">Chemical & Biological Sciences</a></li> <li class="my-class"><a href="/dmse">Materials Sciences & Engineering</a></li> <li><a href="/smds">Simulation, Modeling & Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>

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 <li> element if it is directly subsequent to an element that has a class of “my-class”.

L U L L A B O T + F
R O N T E N D A W E S O M E 53 <header class="site-header container relative pr-0 flex justify-between"> <nav class="primary-nav hidden lg:flex ml-auto"> <ul class="flex"> <li class="flex"> <button class="mega-menu__button" type="button" aria-controls="primary-nav-our-science" aria-expanded="false">Our Science</button> <div id="primary-nav-our-science" class="mega-menu hidden container grid-full bg-blue-50"> <div class="mega-menu__first col-start-1 col-end-9 xl:col-start-2 xl:col-end-10 py-5"> <h3 class="uppercase text--3 leading-1 mb-1 text-gray-40">Lab Research Programs</h3> <ul class="mega-submenu mega-submenu--default" id="block-lab-research-programs"> <li><a href="/cbs">Chemical & Biological Sciences</a></li> <li class="my-class"><a href="/dmse">Materials Sciences & Engineering</a></li> <li><a href="/smds">Simulation, Modeling & Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>

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

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 <ul> elements with a class of “flex”.

L U L L A B O T + F

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”.

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”.

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”

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 (,).

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

L U L L A B O T + F

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

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

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.

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

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

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

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

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.

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.

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.

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.

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.

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

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

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.

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.

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 <a> tag that appears under a <li> that is also the last element under its parent, which is under a “menu-submenu” class.

L U L L A B O T + F

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 <li> tags that are under the “menu-submenu” class — except for the last one, and add a bottom margin to it.

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.

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 <li> tag under its parent, if it is under an element with a “menu-submenu” class.

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 <li> tag under its parent, if it is under an element with a “menu-submenu” class.

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 <li> tag under its parent starting moving one position up.

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

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.

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 <li> tag under its parent starting from the end moving one position up.

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 <li> tag under its parent starting moving one position up.

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.

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.

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.

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

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; }

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; }

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. */ }

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. */ }

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; }

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

CSS Selectors 101-199

CSS Selectors 101-199

More Decks by Michael Herchel

Other Decks in Technology

Featured

Transcript