Gotta select ’em all · jQuery, jQ-what‽

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

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

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!</a>
<a href="#" rel="colleague external">Link!</a>
<a href="#" rel="friend">Link!</a>
<a href="#" rel="friend">Link!</a>
<a href="#" rel="external">Link!</a>
<a href="#" rel="spouse">Link!</a>
<a href="#" rel="external spouse">Link!</a>
<a href="#" rel="me">Link!</a>

9

HTML

<a href="https://wikipedia.org/wiki/a">Link!</a>
<a href="https://wikipedia.org/wiki/b">Link!</a>
<a href="https://google.com">Link!</a>
<a href="https://wikipedia.org/wiki/c">Link!</a>
<a href="https://github.com">Link!</a>
<a href="https://wikipedia.org/wiki/d">Link!</a>
<a href="https://starwars.com">Link!</a>
<a href="https://wikipedia.org/wiki/e">Link!</a>

10