Gotta select ’em all

An activity to remind everyone of all the amazing & complex CSS selectors that exist to help understand choosing elements in JavaScript.

Go fullscreen: ⌃⌥F

Gotta select ’em all

What & why

To code JavaScript (& jQuery) we need to understand all the complex CSS selectors.

JavaScript uses CSS selectors to choose what HTML we want to manipulate.

Effectively understanding CSS selectors means being able to manipulate HTML.

Set up

  1. Form into pairs
  2. Get a pencil & a piece of paper
  3. Work through each chunk of HTML
    & write the CSS selector to grab it
  4. We’ll discuss the answers at the end

10:00

HTML
<a class="btn">Button!</a>
1
HTML
<div>
  <label for="name">Name</label>
  <input id="name">
</div>
<div>
  <label for="email">Email</label>
  <input type="email" id="email">
</div>
2
HTML
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
3
HTML
<ul class="list-group">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol class="list-group">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
4
HTML
<nav>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a class="current" href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

<div class="tab">
  <h2>Heading</h2>
</div>
<div class="tab current">
  <h2>Heading</h2>
</div>
<div class="tab">
  <h2>Heading</h2>
</div>
5
HTML
<ul class="list-group">
  <li>
    <h2>Heading</h2>
    <ol class="list-group">
      <li><h2>Heading</h2></li>
      <li><h2>Heading</h2></li>
      <li><h2>Heading</h2></li>
    </ol>
  </li>
  <li>
    <h2>Heading</h2>
    <ol class="list-group">
      <li><h2>Heading</h2></li>
      <li><h2>Heading</h2></li>
      <li><h2>Heading</h2></li>
    </ol>
  </li>
</ul>
6
HTML
<div class="tab">
  <h2>Heading</h2>
</div>
<div class="tab" hidden>
  <h2>Heading</h2>
</div>
<div class="tab" hidden>
  <h2>Heading</h2>
</div>
7
HTML
<div class="tab" aria-hidden="true">
  <h2>Heading</h2>
</div>
<div class="tab" aria-hidden="false">
  <h2>Heading</h2>
</div>
<div class="tab" aria-hidden="true">
  <h2>Heading</h2>
</div>
8
HTML
<a href="#" rel="external">Link!</li>
<a href="#" rel="colleague external">Link!</li>
<a href="#" rel="friend">Link!</li>
<a href="#" rel="friend">Link!</li>
<a href="#" rel="external">Link!</li>
<a href="#" rel="spouse">Link!</li>
<a href="#" rel="external spouse">Link!</li>
<a href="#" rel="me">Link!</li>
9
HTML
<a href="https://wikipedia.org/wiki/a">Link!</li>
<a href="https://wikipedia.org/wiki/b">Link!</li>
<a href="https://google.com">Link!</li>
<a href="https://wikipedia.org/wiki/c">Link!</li>
<a href="https://github.com">Link!</li>
<a href="https://wikipedia.org/wiki/d">Link!</li>
<a href="https://starwars.com">Link!</li>
<a href="https://wikipedia.org/wiki/e">Link!</li>
10
Start

Gotta select ’em all

An activity to remind everyone of all the amazing & complex CSS selectors that exist to help understand choosing elements in JavaScript.