Counting what each selector matches
querySelectorAll uses exactly the same selector language as CSS, so JavaScript can tell you how many elements a selector matches. .Note matches nothing: class names are case-sensitive.
Type selectors match every element of one kind, class selectors match every element carrying a class name, ID selectors match the one element with that id; the universal selector matches everything and commas group several selectors into one rule.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS so every <h2> is dark blue, every element with class tag has a light grey background, and only <span> elements with class tag are bold.
Make a single rule that gives h1, h2 and any element with class title the font Georgia, serif.
A page has <p class="price sale">₹499</p>. Write a rule that makes it red only when it has both classes.
Explain it without notes
What is the difference between a type selector, a class selector and an ID selector? When would you use each?
What does p.note.warning match, and how is it different from p .note .warning?
Why do many teams avoid ID selectors in CSS?
What happens to a rule like h1, h2, h3:hovr { color: red }, and why?
Preview
Console
Nothing logged yet.Expected console output
p: 3
.note: 3
p.note: 2
.note.warning: 1
#intro: 1
.Note: 0
.box *: 5