JS Query Selectors 101

AKA

CSS selectors

selectors

query selectors

Terminology

<div class="nav nav-item" data-qa="navItem1" id="navItem1">
	Nav1
</div>

"HTML element" / "Element"

.nav {
   color: white;
}

CSS Rule

Attributes? Name them!

Write good selectors

<div class="nav" data-qa="nav-section-1">
   <div class="nav nav-item" data-qa="nav-item-1" id="navItem1">
	 Nav1
   </div>
   
   <div class="nav-item" data-qa="nav-item-2" id="navItem2">
	 Nav2
   </div>
</div>

Quiz!

.nav
.nav.nav-item
.nav .nav-item
[data-qa="nav-item-1"]

Handy shortcuts:

"." for class name
"#" for id name (NEVER USE)
white space (" ") for nested elements
no white space to be more specific about an element
[attributename="attribute value"] for attributes (with a specific value)

Real situation!

Cool things to remember:

CMD + option + i = brings up dev console in Chrome
- or F12
  
  or View -> Developer -> Developer Tools
  
  or Right click -> inspect element
cmd + F on Elements tab lets you search for elements using selectors
- Good for debugging and trying stuff out
- Typing $$('') in console also does this (pronounced: bling bling)
- use $x('') for xpath (gross)