Seletores de valor de atributo

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

Nesta lição, você se aprofundará no conceito de seletores de valor de atributo que começam com. Esta técnica permite que você segmente elementos HTML com base nos caracteres iniciais de seus valores de atributo.

Sintaxe do Seletor de Valor de Atributo que Começa Com:

Para segmentar elementos com valores de atributo que começam com uma string específica, use 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 de classe que começam com "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

Nos exemplos de código fornecidos:

Três botões são definidos com diferentes valores de atributo de classe.
A regra CSS [class^="btn-"] segmenta elementos com um valor de atributo class que começa com "btn-". Ela aplica o estilo background-color: lightgray; a esses botões.

O resultado é que todos os três botões terão uma cor de fundo cinza claro, pois seus valores de atributo de classe começam com "btn-".

Desafio

Fácil

Imagine que você tem a seguinte estrutura HTML para uma lista de itens. Seu objetivo é estilizar itens de lista com um valor de atributo data-category específico que começa com "fruit-". Aplique uma cor de fundo única a esses itens de lista usando CSS.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Value Starting With Selector</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <ul>
        <li data-category="fruit-apple">Apple</li>
        <li data-category="vegetable-carrot">Carrot</li>
        <li data-category="fruit-banana">Banana</li>
        <li data-category="fruit-orange">Orange</li>
        <li data-category="grain-rice">Rice</li>
    </ul>
</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 exatosSeletores de valor de atributoSeletores de valor de atributo II Seletores 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