Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Selectors 101-199

CSS Selectors 101-199

Lots of info on CSS Selectors. Given at the Gainesville Frontend Awesome Meetup, and the San Francisco Drupal Users Group.

Michael Herchel

May 28, 2020
Tweet

More Decks by Michael Herchel

Other Decks in Technology

Transcript

  1. 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
  2. L U L L A B O T + F

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

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

    R O N T E N D A W E S O M E 4
  5. 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
  6. 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
  7. 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
  8. 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)
  9. 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
  10. L U L L A B O T + F

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

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

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

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

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

    R O N T E N D A W E S O M E 15
  16. 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
  17. 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 Define the problem
  18. 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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  19. 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; }
  20. L U L L A B O T + F

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

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

    R O N T E N D A W E S O M E 22 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  23. 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
  24. 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
  25. 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
  26. 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
  27. L U L L A B O T + F

    R O N T E N D A W E S O M E Definitions ⭑ HTML / Markup ⭑ Element / DOM node ⭑ CSS / Stylesheet ⭑ Attribute ⭑ Class ⭑ ID 27
  28. 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
  29. 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
  30. 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.
  31. L U L L A B O T + F

    R O N T E N D A W E S O M E 31 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  32. 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”.
  33. L U L L A B O T + F

    R O N T E N D A W E S O M E 33 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  34. 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.
  35. L U L L A B O T + F

    R O N T E N D A W E S O M E 35 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  36. 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.
  37. L U L L A B O T + F

    R O N T E N D A W E S O M E 37 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  38. 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”.
  39. L U L L A B O T + F

    R O N T E N D A W E S O M E 39 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  40. 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”.
  41. 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”.
  42. 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.
  43. 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; }
  44. 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.
  45. 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
  46. 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”.
  47. L U L L A B O T + F

    R O N T E N D A W E S O M E 47 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  48. 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.
  49. L U L L A B O T + F

    R O N T E N D A W E S O M E 49 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  50. 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”.
  51. 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 &amp; Biological Sciences</a></li> <li class="my-class"><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  52. 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”.
  53. 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 &amp; Biological Sciences</a></li> <li class="my-class"><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  54. 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
  55. 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”.
  56. L U L L A B O T + F

    R O N T E N D A W E S O M E 56 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  57. 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”.
  58. 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”.
  59. 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”
  60. 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 (,).
  61. 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
  62. L U L L A B O T + F

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

    R O N T E N D A W E S O M E 63
  64. 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
  65. 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
  66. 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.
  67. 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
  68. 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
  69. 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
  70. 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
  71. 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.
  72. 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.
  73. 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.
  74. 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.
  75. 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.
  76. 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
  77. 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
  78. 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.
  79. 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.
  80. L U L L A B O T + F

    R O N T E N D A W E S O M E :first-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.
  81. L U L L A B O T + F

    R O N T E N D A W E S O M E 81 <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 &amp; Biological Sciences</a></li> <li><a href="/dmse">Materials Sciences &amp; Engineering</a></li> <li><a href="/smds">Simulation, Modeling &amp; Decision Science</a></li> <li><a href="/cmi">Critical Materials Institute</a></li> </ul>
  82. L U L L A B O T + F

    R O N T E N D A W E S O M E :first-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.
  83. 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.
  84. 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.
  85. 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.
  86. 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.
  87. 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
  88. 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.
  89. 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.
  90. 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.
  91. 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.
  92. 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.
  93. 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.
  94. 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
  95. 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; }
  96. 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; }
  97. 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. */ }
  98. 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. */ }
  99. 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; }
  100. 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