Bird
Raised Fist0
CSSmarkup~30 mins

Starts-with and ends-with selectors in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Using Starts-with and Ends-with Attribute Selectors in CSS
📖 Scenario: You are creating a simple webpage for a bookstore. The page has several links to different book categories. Each link has a href attribute that starts with "/books/" and ends with the category name, like "/books/fiction" or "/books/science".You want to style these links differently based on whether their href attribute starts with or ends with certain text.
🎯 Goal: Build CSS rules that use the starts-with (^=) and ends-with ($=) attribute selectors to style links whose href attribute starts with "/books/" and ends with "fiction".The links starting with "/books/" should have a blue color. The links ending with "fiction" should have a green background.
📋 What You'll Learn
Create CSS rules using the starts-with selector [href^="/books/"] to color links blue
Create CSS rules using the ends-with selector [href$="fiction"] to give links a green background
Use semantic CSS selectors without adding extra classes or IDs
Ensure the CSS is valid and applies correctly to the example HTML links
💡 Why This Matters
🌍 Real World
Websites often need to style links or elements differently based on parts of their attributes, like URLs or IDs. Using starts-with and ends-with selectors helps target these elements without extra classes.
💼 Career
Front-end developers use CSS attribute selectors to write clean, maintainable styles that adapt to dynamic content. Understanding these selectors is essential for styling navigation menus, buttons, and links efficiently.
Progress0 / 4 steps
1
Create example HTML links
Write HTML code that creates three <a> links with these exact href attributes: "/books/fiction", "/books/science", and "/contact". Use the link texts: Fiction Books, Science Books, and Contact Us respectively.
CSS
Hint

Use three <a> tags with the exact href values given.

2
Add CSS rule for links starting with '/books/'
Add a CSS rule that selects all <a> elements with an href attribute starting with "/books/" using the selector [href^="/books/"]. Set their text color to blue using color: blue;.
CSS
Hint

Use the attribute selector [href^="/books/"] and set color: blue;.

3
Add CSS rule for links ending with 'fiction'
Add a CSS rule that selects all <a> elements with an href attribute ending with "fiction" using the selector [href$="fiction"]. Set their background color to green using background-color: green;.
CSS
Hint

Use the attribute selector [href$="fiction"] and set background-color: green;.

4
Wrap links and CSS in a semantic HTML structure
Wrap the three <a> links inside a <nav> element to indicate navigation. Also, move the <style> block inside the <head> section of a complete HTML5 document with <html lang="en">, <head>, and <body> tags.
CSS
Hint

Use semantic tags: <nav> for links, and place <style> inside <head> in a full HTML5 document.

Practice

(1/5)
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