Recommended
Challenge - 5 Problems
Attribute Selector Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ selector
intermediate2:00remaining
Which CSS rule selects all elements with a 'type' attribute exactly equal to 'text'?
Given the following HTML snippet:
Which CSS selector will style only the inputs where
<input type="text" name="username">
<input type="password" name="password">
<input type="text" name="email">
Which CSS selector will style only the inputs where
type is exactly text?Attempts:
2 left
💡 Hint
The selector should match elements whose attribute value is exactly the given string.
✗ Incorrect
The selector input[type="text"] matches input elements with a type attribute exactly equal to 'text'. The other selectors match based on starts with (^=), contains (*=), or ends with ($=), which would select more or different elements.
❓ selector
intermediate2:00remaining
Which selector matches elements with a 'data-role' attribute that starts with 'admin'?
Consider these HTML elements:
Which CSS selector will style only the first two divs?
<div data-role="admin-user">User</div>
<div data-role="administrator">Admin</div>
<div data-role="guest">Guest</div>
Which CSS selector will style only the first two divs?
Attempts:
2 left
💡 Hint
Look for the selector that matches attribute values starting with a specific string.
✗ Incorrect
The ^= attribute selector matches elements whose attribute value starts with the given string. So div[data-role^="admin"] matches both 'admin-user' and 'administrator'. The $= matches ends with, *= matches contains anywhere, and = matches exact value only.
❓ selector
advanced2:00remaining
What is the visual effect of this CSS rule?
a[href$='.pdf'] { color: red; }Given this CSS:
And these links:
Which links will appear red in the browser?
a[href$='.pdf'] { color: red; }And these links:
<a href="file.pdf">PDF File</a>
<a href="document.pdf?version=2">PDF Version 2</a>
<a href="image.png">Image</a>
Which links will appear red in the browser?
Attempts:
2 left
💡 Hint
The $= selector matches attribute values that end with the given string exactly.
✗ Incorrect
The selector a[href$='.pdf'] matches anchor tags whose href attribute ends exactly with '.pdf'. The first link ends with '.pdf' so it is red. The second link ends with '?version=2' so it does not match. The third link ends with '.png' so it does not match.
❓ accessibility
advanced2:00remaining
Which attribute selector helps improve accessibility by styling only form inputs that have a 'required' attribute?
You want to visually highlight all form fields that are required by the user.
Which CSS selector correctly targets all inputs with the 'required' attribute, regardless of its value?
Which CSS selector correctly targets all inputs with the 'required' attribute, regardless of its value?
Attempts:
2 left
💡 Hint
The presence selector matches elements that have the attribute, no matter its value.
✗ Incorrect
The selector input[required] matches all input elements that have the required attribute, regardless of its value. The other selectors look for specific values or patterns, which may miss inputs that have required without a value or with different values.
🧠 Conceptual
expert2:00remaining
How many elements will be selected by this CSS?
button[aria-pressed="true"]Given this HTML:
How many buttons will the selector
<button aria-pressed="true">On</button>
<button aria-pressed="false">Off</button>
<button aria-pressed>Unknown</button>
<button>No attribute</button>
How many buttons will the selector
button[aria-pressed="true"] match?Attempts:
2 left
💡 Hint
The selector matches elements with the attribute exactly equal to the string 'true'.
✗ Incorrect
Only the first button has aria-pressed attribute exactly equal to 'true'. The second has 'false', the third has aria-pressed without a value (treated as empty string), and the fourth has no attribute. So only one element matches.