Make a prediction before revealing an answer. A wrong prediction is a useful clue about what to explore next. These exercises keep choices only in page memory and do not run the displayed snippets.
1. Inherited or directly assigned?
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<section class="note"><p>A small observation.</p></section>
<style>
.note { color: orange; }
p { color: white; }
</style>What colour is the paragraph text with only these rules?
Correct. A declaration on the paragraph takes precedence over an inherited colour. Parent selector specificity does not change that.
Take it further
Remove the p rule in your own practice copy. Explain why the paragraph now inherits orange.
2. Which button is selected?
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<button class="hint">First hint</button>
<button class="hint">Second hint</button>
<script>
const button = document.querySelector('.hint');
button.textContent = 'Ready';
</script>Which visible label changes?
Correct. querySelector returns the first match. Selecting all matches requires a different method and iteration.
Take it further
Describe how you would change both labels while preserving native buttons. Check the difference between querySelector and querySelectorAll.
3. One click, two listeners
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<div id="panel"><button id="show" type="button">Show</button></div>
<script>
document.querySelector('#show').addEventListener('click', () => console.log('button'));
document.querySelector('#panel').addEventListener('click', () => console.log('panel'));
</script>Click the button once. With no other handlers, what is logged?
Correct. The target listener runs, then this bubbling click reaches the parent listener.
Take it further
Predict what changes if you click the panel outside the button. Avoid adding stopPropagation until you can explain why the parent should not receive the event.