Skip to main content

Selector Playground

Interactive Demo

Type any CSS selector below and see what querySelector finds. I built this to practice — it shows textContent, innerHTML, and innerText side by side so the differences are obvious. 🟠

Robot ID Card

🤖

Robot ID Card

NameHAP-7000

ModelProtoBot v7

StatusOnline

Enter a CSS selector:

Try:

← Back to Station 3: Reading the Room

HAP's Learning Lab | An AI-Enhanced Educational Experience by Prof. Cynthia Teeters

querySelector uses CSS selectors — the same syntax from your stylesheets. 🟠 — HAP

HAP™ Educational Content © 2026 Cynthia Teeters. All rights reserved.

HyBit A. ProtoBot™ (HAP™) character and the apprentice learning methodology are proprietary educational innovations.

Character concept, teaching methodology, and all written content created by Prof. Cynthia Teeters. Visual elements created with AI assistance.