CSSmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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

Need a hint?

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

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

Fiction Books
Science Books
Contact Us

/* Add CSS rule for links starting with '/books/' */

Need a hint?

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

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

Fiction Books
Science Books
Contact Us


[href^="/books/"] {
    color: blue;
}

/* Add CSS rule for links ending with 'fiction' */

Need a hint?

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

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

 and create full HTML5 structure with  and  inside -->

Need a hint?

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