Attribute selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule selects all elements with a 'type' attribute exactly equal to 'text'?

Given the following HTML snippet:

<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?

A input[type="text"] { border: 2px solid blue; }

B input[type*="text"] { border: 2px solid blue; }

C input[type^="text"] { border: 2px solid blue; }

D input[type$="text"] { border: 2px solid blue; }

💡 Hint

The selector should match elements whose attribute value is exactly the given string.

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

intermediate

Which selector matches elements with a 'data-role' attribute that starts with 'admin'?

Consider these HTML elements:

<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?

A div[data-role*="admin"] { background-color: yellow; }

B div[data-role$="admin"] { background-color: yellow; }

C div[data-role^="admin"] { background-color: yellow; }

D div[data-role="admin"] { background-color: yellow; }

💡 Hint

Look for the selector that matches attribute values starting with a specific string.

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

advanced

What is the visual effect of this CSS rule?
a[href$='.pdf'] { color: red; }

Given this CSS:

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?

A No links will be red because the selector is invalid.

B Both links with href containing '.pdf' anywhere will be red.

C All links will be red because they all have href attributes.

D Only the link with href exactly ending with '.pdf' (file.pdf) will be red.

💡 Hint

The $= selector matches attribute values that end with the given string exactly.

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

advanced

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?

A input[required] { outline: 2px solid red; }

B input[required="true"] { outline: 2px solid red; }

C input[required^="true"] { outline: 2px solid red; }

D input[required$="true"] { outline: 2px solid red; }

💡 Hint

The presence selector matches elements that have the attribute, no matter its value.

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

expert

How many elements will be selected by this CSS?
button[aria-pressed="true"]

Given this HTML:

<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?

A 4

B 1

C 3

D 2

💡 Hint

The selector matches elements with the attribute exactly equal to the string 'true'.

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.