Seletores de valor de atributo II

Lição 14 de 15 do curso Seletores CSS da Coddy.

Nesta lição, exploraremos o conceito de seletores de valor de atributo que termina com. Esta técnica permite que você selecione elementos HTML com base nos caracteres finais de seus valores de atributo.

Sintaxe do Seletor de Valor de Atributo que Termina Com:

Para selecionar elementos com valores de atributo que terminam com uma string específica, você usa a sintaxe de seletor [attribute$="value"].

Exemplos de Código:

HTML:

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

CSS:

/* Seleciona botões com valores de atributo class que terminam com "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

Nos exemplos de código fornecidos:

Três botões são definidos com diferentes valores de atributo class.
A regra CSS [class$="-tertiary"] seleciona elementos com um valor de atributo class que termina com "-tertiary". Ela aplica o estilo background-color: lightcoral; a esses botões.

Como resultado, o botão com o valor de atributo class "btn-tertiary" terá uma cor de fundo light coral.

Desafio

Fácil

Você recebeu uma lista de faixas de música em uma página da web. Cada faixa é representada por um elemento <div> com um atributo data-track indicando seu formato (ex: "mp3", "wav", "flac"). Sua tarefa é estilizar as faixas de forma diferente com base em seu formato usando seletores de valor de atributo que termina com.

Sua tarefa de CSS é:

Dê um fundo exclusivo para as faixas com o valor do atributo data-track terminando com "mp3".
Dê um fundo exclusivo para as faixas com o valor do atributo data-track terminando com "wav".
Dê um fundo exclusivo para as faixas com o valor do atributo data-track terminando com "flac".

Experimente você mesmo

<!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>

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributo Presença e valores exatos Seletores de valor de atributoSeletores de valor de atributo IISeletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classe Seletores de ID Seletores universais

3Seletores Combinadores

Seletor de filho Seletor de descendente Seletor de irmão adjacente Seletor de irmão geral