Attribute Value selectors II

Lesson 14 of 15 in Coddy's CSS Selectors course.

In this lesson, we'll explore the concept of attribute value ending with selectors. This technique allows you to target HTML elements based on the final characters of their attribute values.

Attribute Value Ending With Selector Syntax:

To target elements with attribute values that end with a specific string, you use the [attribute$="value"] selector syntax.

Code Examples:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Selects buttons with class attribute values ending with "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

In the provided code examples:

Three buttons are defined with different class attribute values.
The CSS rule [class$="-tertiary"] targets elements with a class attribute value that ends with "-tertiary". It applies the background-color: lightcoral; style to these buttons.

As a result, the button with the class attribute value "btn-tertiary" will have a light coral background color.

Challenge

Easy

You have been given a list of music tracks on a webpage. Each track is represented by a <div> element with a data-track attribute indicating its format (e.g., "mp3", "wav", "flac"). Your task is to style the tracks differently based on their format using attribute value ending with selectors.

Your CSS task is to:

Give unique background to tracks with the data-track attribute value ending with "mp3".
Give unique background to tracks with the data-track attribute value ending with "wav".
Give unique background to tracks with the data-track attribute value ending with "flac".

Try it yourself

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>

All lessons in CSS Selectors

1Introduction to CSS Selectors

Purpose of CSS Selectors Why are they important?

4Attribute selectors

Intro to Attribute Selectors Presence and Exact Values Attribute Value selectors Attribute Value selectors IIAttribute Value selectors III

2Simple Selectors

Type selectors Class selectors ID selectors Universal selectors

3Combinator Selectors

Child selector Descendant selector Adjacent sibling selector General sibling selector