Web · Selectors and classes
Quizz
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — CSS Selector Challenge: Basics
Which of the following is the correct CSS selector to target all paragraph elements on a page?
Options
• ```p { }```
• ```#p { }```
• ```.p { }```
• ```<p> { }```
Hint : Remember the basic syntax for element selectors in CSS. No special characters are needed to target all elements of a specific type.
Exercise 2 — Selector Specificity Battle
Given the following CSS rules and HTML element, which color will the text be?
p { color: black; }
.text { color: blue; }
#content { color: red; }
p.text { color: green; }
<p id="content" class="text">What color am I?</p>
Options
• red
• blue
• green
• black
Hint : Think about the specificity hierarchy of CSS selectors. Which selector has the highest specificity weight?
Exercise 3 — Complete the Selectors
Complete the CSS selectors to target the elements as described in the comments.
/* paragraph elements */
____ {
color: black;
}
/* class "warning" */
____ {
color: red;
}
/* ID "main-header" */
____ {
color: blue;
}
/* paragraph elements + class "highlight" */
____ {
background-color: yellow;
}
Options: p .warning #main-header p.highlight * div
Hint : Remember the correct syntax for each type of selector - element selectors have no prefix, class selectors start with a dot, and ID selectors start with a hash/pound sign.
Exercise 4 — Match Selectors to Specificity Weight
Match each CSS selector with its correct specificity weight from lowest to highest.
Items to match
• p
• .highlight
• p.highlight
• #main-content
Definitions
• Lowest specificity (element selector)
• Medium specificity (class selector)
• Higher specificity (element + class selector)
• Highest specificity (ID selector)
Exercise 5 — Choosing the Right Selector
Which selector would be the MOST appropriate for styling a navigation menu that appears once at the top of every page on your website?
Options
• ```#main-nav { }```
• ```nav.main-nav { }```
• ```div { }```
• ```body > div > div { }```
Hint : Consider which selector provides the right balance of specificity and semantic meaning for a unique navigation component.
Exercise 6 — Specificity Basics
Which of the following selectors has the HIGHEST specificity?
Options
• ```#header { }```
• ```h1 { }```
• ```.title { }```
• ```* { }```
Hint : Think about which type of selector (element, class, or ID) has the highest specificity in CSS.
Exercise 7 — Selector Strength Comparison
Which of the following selectors has the WEAKEST effect in terms of specificity?
Options
• ```h1 { }```
• ```#title { }```
• ```.heading { }```
• ```h1 { color: red !important; }```
Hint : Think about the hierarchy of CSS selectors and which type has the least power when styles conflict.
Exercise 8 — Which Style Wins?
Given the following CSS rules, which one will determine the color of the text in the paragraph below?
p { color: black !important; }
#content { color: red; }
.text { color: blue; }
body p.text { color: green; }
<div id="content">
<p class="text">What color am I?</p>
</div>
Options
• black
• red
• blue
• green
Hint : Pay close attention to all factors that affect specificity, including the special !important declaration which overrides normal specificity rules.
Exercise 9 — Match Scenarios to Selector Types
Match each web development scenario with the most appropriate selector type to use.
Items to match
• Styling all paragraphs on the site
• Styling warning messages that appear in various places
• Styling the main page logo
• Styling only paragraphs inside the footer
Definitions
• p { }
• .warning { }
• #logo { }
• footer p { }
Exercise 10 — Inheritance Challenge
Given the following HTML and CSS, what color will the text "Codémon Types" be?
<div id="main">
<section class="content">
<h1 class="title">Codémon Types</h1>
</section>
</div>
#main { color: red; }
.content { color: blue; }
h1 { color: green; }
.title { color: purple; }
Options
• purple
• green
• blue
• red
Hint : Think about how inheritance works with nested elements, and which selector has the most direct and specific impact on the h1 element.
Exercise 11 — CSS Selector Syntax
Complete the CSS selectors using the correct symbols to match the descriptions.
/* Select all buttons */
____ {
background-color: blue;
}
/* Select elements with the class "warning" */
____ {
color: red;
}
/* Select the element with ID "logo" */
____ {
border: 1px solid black;
}
Options: button .warning #logo class.warning id#logo
Hint : Each type of selector has its own syntax: element selectors use just the tag name, class selectors use a dot (.) prefix, and ID selectors use a hash (#) prefix.
Exercise 12 — Multiple Classes on HTML Elements
What is the correct way to add multiple classes to an HTML element?
Options
• ```<div class="card highlight">Content</div>```
• ```<div class="card, highlight">Content</div>```
• ```<div class="card" class="highlight">Content</div>```
• ```<div class="card.highlight">Content</div>```
Hint : Multiple classes should be separated by spaces within a single class attribute.
Exercise 13 — Multiple Classes Challenge
Given the following CSS and HTML, what color will the text "Pyrochu" be?
.card { color: black; }
.fire-type { color: orange; }
.legendary { color: purple; }
.card.legendary { color: gold; }
.fire-type.legendary { color: red; }
<div class="card fire-type legendary">Pyrochu</div>
Options
• red
• gold
• purple
• orange
Hint : Consider the specificity of each selector. When multiple classes are combined in a selector, its specificity increases. Which selector is the most specific one that applies to this element?
Exercise 14 — Order of Importance in CSS
Match each factor with its level of importance in determining which CSS rules are applied (from most to least important).
Items to match
• Highest Priority
• Second Highest
• Third Highest
• Lowest Priority
Definitions
• !important declaration
• Inline styles (style attribute)
• ID selectors (#id)
• Universal selector (*)
Exercise 15 — Overriding Styles
You have this CSS rule that makes all paragraphs blue:
p { color: blue; }
Which selector should you use to make ONLY ONE specific paragraph red instead?
Options
• ```#special-paragraph { color: red; }```
• ```p { color: red; }```
• ```* { color: red; }```
• ```paragraph { color: red; }```
Hint : To override the style for just one element, you need a selector with higher specificity that targets only that element.
Exercise 16 — Source Order and the Cascade
Given the following CSS rules with identical specificity, which color will be applied?
/* styles.css */
.card { color: blue; }
.card { color: red; }
.card { color: green; }
<div class="card">What color am I?</div>
Options
• green
• red
• blue
• All three colors blended together
Hint : When selectors have the same specificity, the cascade determines which style is applied. Think about the order in which the styles are defined in the stylesheet.
Exercise 17 — Best Practices for Selectors
Which is generally considered the BEST practice for styling common elements like buttons across a website?
Options
• Use class selectors (e.g., .button)
• Use element selectors (e.g., button)
• Use ID selectors (e.g., #submit-button, #cancel-button)
• Use inline styles on each button
Hint : Consider which selector type provides the best balance of reusability and specificity for common UI elements.
Exercise 18 — When to Use ID Selectors
What is the MOST appropriate use case for an ID selector in CSS?
Options
• Styling a unique element that appears only once on the page, like the main header
• Styling all buttons to have the same appearance
• Styling paragraphs with similar formatting
• Styling all elements of the same type
Hint : Consider what makes ID selectors different from class or element selectors, particularly their uniqueness requirement.
Exercise 19 — Specificity Challenge
Given these CSS rules and HTML element, what color will the text be?
p { color: black; }
.text { color: blue; }
#content { color: red; }
<p id="content" class="text">What color am I?</p>
Options
• red
• blue
• black
• No color (default text color)
Hint : Remember the specificity hierarchy: ID selectors > Class selectors > Element selectors.
Exercise 20 — Inline Styles vs. External CSS
Which style would win in this situation?
/* In your external CSS file */
#message { color: blue; }
.alert { color: red; }
p { color: green; }
<p id="message" class="alert" style="color: purple;">Important message</p>
Options
• purple
• blue
• red
• green
Hint : Consider where inline styles rank in the specificity hierarchy compared to ID, class, and element selectors.
Exercise 21 — The !important Declaration
Which of these CSS rules will take precedence, regardless of the others?
p { color: red; }
.text { color: blue; }
#paragraph { color: green; }
p { color: purple !important; }
Options
• p { color: purple !important; }
• #paragraph { color: green; }
• .text { color: blue; }
• p { color: red; }
Hint : The !important declaration overrides normal specificity rules in CSS. It has the highest priority regardless of selector type.
Exercise 22 — HTML Structure and CSS Selectors
Given this HTML structure, which CSS selector would target ONLY the second paragraph?
<div>
<p>First paragraph</p>
<p id="special">Second paragraph</p>
<p class="note">Third paragraph</p>
</div>
Options
• ```#special```
• ```p```
• ```.note```
• ```div p```
Hint : Consider which selector would uniquely identify just the second paragraph without selecting any other paragraphs.
Exercise 23 — Which Approach is Best?
You need to style all the buttons across your website. Some are for submitting forms, others are for navigation. Which approach is generally considered best practice?
Options
• Use a generic .btn class with modifiers like .btn-primary, .btn-secondary
• Style the button element directly: button { ... }
• Give each button a unique ID: #submit-button, #nav-button
• Use deeply nested selectors: form div button, nav ul li button
Hint : Think about the balance between reusability, maintainability, and appropriate specificity for common UI elements.
Exercise 24 — Element vs Class Selectors
You want to style only SOME of the paragraphs on your page to have a red background. Which selector is MOST appropriate?
Options
• A class selector: ```.highlight { }```
• An element selector: ```p { }```
• An ID selector: ```#paragraph { }```
• Inline styles on each paragraph
Hint : Consider which selector type allows you to selectively apply styles to some elements of the same type but not others.
Exercise 25 — CSS Selector Syntax
Which of the following is the correct syntax for selecting an element with the ID "header"?
Options
• ```#header { }```
• ```header { }```
• ```.header { }```
• ```*header { }```
Hint : Remember the correct prefix character to use for ID selectors in CSS.