Starts-with and ends-with selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS selector targets all links starting with 'https'?

Given the following HTML, which CSS selector will style only the elements whose href attribute starts with 'https'?

CSS

<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Insecure Link</a>
<a href="https://another.com">Another Secure Link</a>

A a[href$="https"] { color: green; }

B a[href|="https"] { color: green; }

C a[href^="https"] { color: green; }

D a[href*="https"] { color: green; }

💡 Hint

The '^=' selector matches attribute values that start with the given string.

The selector a[href^="https"] matches all a elements whose href attribute value starts with "https". This includes both "https://example.com" and "https://another.com".

Option C uses $= which matches endings, not beginnings. Option C uses *= which matches anywhere in the string. Option C uses |= which matches exact or prefix followed by a hyphen, not suitable here.

❓ selector

intermediate

Which CSS selector targets all images with filenames ending in '.png'?

Given the following HTML, which CSS selector will style only the elements whose src attribute ends with '.png'?

CSS

<img src="photo.png" alt="Photo">
<img src="icon.svg" alt="Icon">
<img src="banner.png" alt="Banner">

A img[src^=".png"] { border: 2px solid blue; }

B img[src|=".png"] { border: 2px solid blue; }

C img[src*=".png"] { border: 2px solid blue; }

D img[src$=".png"] { border: 2px solid blue; }

💡 Hint

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

The selector img[src$=".png"] matches all img elements whose src attribute ends with ".png". This includes "photo.png" and "banner.png".

Option D uses ^= which matches the start, not the end. Option D uses *= which matches anywhere in the string. Option D uses |= which is not appropriate here.

🧠 Conceptual

advanced

What is the visual effect of this CSS rule?

Consider this CSS rule:
input[name^="user"] { background-color: lightyellow; }
What will happen in the browser?

A All input elements with a name attribute starting with 'user' will have a light yellow background.

B All input elements with a name attribute ending with 'user' will have a light yellow background.

C All input elements with a name attribute containing 'user' anywhere will have a light yellow background.

D All input elements with a name attribute exactly equal to 'user' will have a light yellow background.

💡 Hint

Remember '^=' means 'starts with'.

The selector input[name^="user"] matches all input elements whose name attribute value starts with "user". For example, name="username" or name="user_id".

Option A describes *=, Option A describes $=, and option A describes exact match which uses =.

📝 Syntax

advanced

Identify the syntax error in this CSS selector

Which option contains a syntax error in the CSS selector?

A img[src$='.jpg'] { border: 1px solid black; }

B div[class^=container] { padding: 10px; }

C a[href^='https'] { color: blue; }

D p[data-end$='test'] { font-weight: bold; }

💡 Hint

Attribute values in selectors must be quoted.

Option B is missing quotes around the attribute value container. It should be div[class^="container"]. Without quotes, this is invalid CSS syntax.

Options B, C, and D correctly quote their attribute values.

❓ accessibility

expert

How to use starts-with selector to improve accessibility for form inputs?

You have multiple form inputs with IDs like 'email-input', 'email-confirm', 'email-error'. You want to style all elements whose ID starts with 'email-' to improve focus visibility for keyboard users. Which CSS selector is best and why?

A [id^="email-"]:focus-visible { outline: 3px solid orange; } Because it targets elements with IDs starting with 'email-' only when focused by keyboard.

B #email- { outline: 3px solid orange; } Because it targets all IDs starting with 'email-'.

C [id$="email-"]:focus { outline: 3px solid orange; } Because it targets elements ending with 'email-' on any focus.

D .email-:focus-visible { outline: 3px solid orange; } Because it targets elements with class 'email-' on keyboard focus.

💡 Hint

Use attribute selectors with '^=' and the :focus-visible pseudo-class for keyboard focus.

Option A correctly uses the attribute selector [id^="email-"] to select elements whose ID starts with "email-". It also uses :focus-visible to apply styles only when the element is focused via keyboard, improving accessibility.

Option A is invalid syntax. Option A uses $= which matches endings, not starts. Option A targets a class, but the elements have IDs, not classes.