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.

Practice

1. Which CSS selector targets all elements with an href attribute that starts with "https"?

easy

A. a[href*="https"]

B. a[href$="https"]

C. a[href^="https"]

D. a[href~="https"]

Solution

1. Step 1: Understand the starts-with selector syntax

   The starts-with selector uses the caret symbol (^) inside square brackets to match attribute values that begin with a specific string.

2. Step 2: Match the selector to the question

   The selector a[href^="https"] matches all anchor tags with href attributes starting with "https".

3. Final Answer:

   a[href^="https"] -> Option C

4. Quick Check:

   Starts-with selector = ^ = a[href^="https"] [OK]

Hint: Starts-with selector uses ^ inside attribute brackets [OK]

Common Mistakes:

• Confusing starts-with (^) with ends-with ($)
• Using *= which means contains, not starts-with
• Using ~ which matches whole words in space-separated values

2. Which of the following is the correct CSS syntax to select elements with a class attribute ending with "-btn"?

easy

A. [class$="-btn"]

B. .class^="-btn"

C. .class$="-btn"

D. [class^="-btn"]

Solution

1. Step 1: Identify the ends-with selector syntax

   The ends-with selector uses the dollar sign ($) inside square brackets to match attribute values that end with a specific string.

2. Step 2: Apply correct syntax for class attribute

   To select elements whose class attribute ends with "-btn", use [class$="-btn"]. The dot (.) is for class names, not attribute selectors.

3. Final Answer:

   [class$="-btn"] -> Option A

4. Quick Check:

   Ends-with selector = $ inside [] = [class$="-btn"] [OK]

Hint: Ends-with selector uses $ inside attribute brackets [OK]

Common Mistakes:

• Using dot (.) with attribute selectors incorrectly
• Confusing starts-with (^) with ends-with ($)
• Missing square brackets for attribute selectors

3. Given this HTML:

<a href="https://example.com">Link1</a>
<a href="http://example.com">Link2</a>
<a href="https://secure.com">Link3</a>

Which links will be styled by the CSS selector a[href^="https"] { color: red; }?

medium

A. All three links

B. Only Link1

C. Link2 and Link3

D. Link1 and Link3

Solution

1. Step 1: Identify which href values start with "https"

   Link1 has href="https://example.com" and Link3 has href="https://secure.com". Both start with "https". Link2 starts with "http" (no s).

2. Step 2: Apply the starts-with selector effect

   The selector a[href^="https"] styles only elements whose href attribute starts with "https". So Link1 and Link3 get styled.

3. Final Answer:

   Link1 and Link3 -> Option D

4. Quick Check:

   Starts-with "https" matches Link1 & Link3 [OK]

Hint: Starts-with selector matches only beginning of attribute value [OK]

Common Mistakes:

• Including links starting with "http" without s
• Confusing contains (*) with starts-with (^)
• Assuming all links get styled

4. You wrote this CSS but it doesn't style any elements:

input[name^="user"] { background-color: yellow; }

HTML:

<input name="login">
<input name="signup">
<input name="emailuser">

What is the likely problem?

medium

A. The selector should use $ instead of ^

B. The attribute values do not start with "user"

C. The input elements need IDs for this selector

D. The selector syntax is invalid

Solution

1. Step 1: Check attribute values against selector

   The selector targets inputs with name attributes starting with "user". The inputs have names "login", "signup", and "emailuser". None of these start with "user".

2. Step 2: Identify why no elements styled

   Since none of the name attributes start with "user", no elements match the selector, so nothing gets styled.

3. Final Answer:

   The attribute values do not start with "user" -> Option B

4. Quick Check:

   Starts-with selector matches only beginning of attribute value [OK]

Hint: Check if attribute values actually start with the given string [OK]

Common Mistakes:

• Assuming ends-with ($) is needed instead of starts-with (^)
• Thinking IDs are required for attribute selectors
• Believing selector syntax is wrong when it is correct

5. You want to style all img elements whose src attribute starts with "https://cdn." and ends with ".png". Which CSS selector correctly targets these images?

hard

A. img[src^="https://cdn."][src$=".png"]

B. img[src*="https://cdn."][src*=".png"]

C. img[src$="https://cdn."][src^=".png"]

D. img[src^=".png"][src$="https://cdn."]

Solution

1. Step 1: Understand combined attribute selectors

   You can combine multiple attribute selectors to match elements that satisfy all conditions. Here, one selector checks if src starts with "https://cdn." and another checks if src ends with ".png".

2. Step 2: Match correct starts-with and ends-with syntax

   Starts-with uses ^ and ends-with uses $. So the correct selector is img[src^="https://cdn."][src$=".png"].

3. Final Answer:

   img[src^="https://cdn."][src$=".png"] -> Option A

4. Quick Check:

   Combine ^ and $ selectors correctly [OK]

Hint: Combine ^ and $ selectors to match start and end [OK]

Common Mistakes:

• Using * (contains) instead of ^ or $
• Swapping ^ and $ symbols
• Incorrect order or syntax of attribute selectors