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)

JS Query Selectors 101

By Laurel Bruggeman

Made with Slides.com

JS Query Selectors 101

  • 501

More from Laurel Bruggeman