Seletores de Atributos

6.1 Tipos de Seletores de Atributos

Os Seletores de Atributos no CSS permitem que você escolha elementos com base na existência de atributos, seus valores ou partes dos valores dos atributos. Eles oferecem opções flexíveis e poderosas para estilizar elementos HTML, tornando-os especialmente úteis para trabalhar com conteúdo dinâmico e páginas web interativas.

Tipos de Seletores de Atributos

• Seletor de Atributo (Attribute Selector)
• Seletor de Atributo com Valor (Attribute Selector with Value)
• Seletor de Atributo com Valor Inicial (Attribute Selector with Prefix)
• Seletor de Atributo com Valor Final (Attribute Selector with Suffix)
• Seletor de Atributo que Contém Substring (Attribute Selector with Substring)
• Seletor de Atributo com Espaço como Separador (Attribute Selector with Whitespace)
• Seletor de Atributo com Hífen como Separador (Attribute Selector with Hyphen)

6.2 Seletor de Atributo

O seletor de atributo escolhe elementos que possuem o atributo especificado, independentemente do seu valor.

Sintaxe:

    
      [atributo] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos que possuem o atributo title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="Este é um título">Este texto será azul.</p>
      <p>Este texto não será azul.</p>
    
  

6.3 Seletor de Atributo com Valor

O seletor de atributo com valor escolhe elementos cujos atributos têm o valor especificado.

Sintaxe:

    
      [atributo="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos cujo atributo title tem o valor "Exemplo" */
      [title="Exemplo"] {
        color: green;
      }
    
  

    
      <p title="Exemplo">Este texto será verde.</p>
      <p title="Outro exemplo">Este texto não será verde.</p>
    
  

6.4 Seletor de Atributo com Prefixo

O seletor de atributo com valor inicial escolhe elementos cujos atributos começam com o valor especificado.

Sintaxe:

    
      [atributo^="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos cujo atributo title começa com "Início" */
      [title^="Início"] {
        color: red;
      }
    
  

    
      <p title="Início do texto">Este texto será vermelho.</p>
      <p title="Não início">Este texto não será vermelho.</p>
    
  

6.5 Seletor de Atributo com Sufixo

O seletor de atributo com valor final escolhe elementos cujos atributos terminam com o valor especificado.

Sintaxe:

    
      [atributo$="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos cujo atributo title termina com "fim" */
      [title$="fim"] {
        color: orange;
      }
    
  

    
      <p title="Este é o fim">Este texto será laranja.</p>
      <p title="Este é o início">Este texto não será laranja.</p>
    
  

6.6 Seletor de Atributo que Contém Substring

O seletor de atributo que contém valor escolhe elementos cujos atributos contêm o valor especificado.

Sintaxe:

    
      [atributo*="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos cujo atributo title contém "meio" */
      [title*="meio"] {
        color: purple;
      }
    
  

    
      <p title="Este é o meio do texto">Este texto será roxo.</p>
      <p title="Não há meio aqui">Este texto não será roxo.</p>
    
  

6.7 Seletor de Atributo com Espaço como Separador

O seletor de atributo com separação por espaço escolhe elementos cujo atributo contém um ou mais valores, separados por espaços. Isso é útil para escolher elementos com determinadas classes ou funções.

Sintaxe:

    
      [atributo~="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos cujo atributo class contém "highlight" na lista de classes */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Este texto terá fundo amarelo.</p>
      <p class="special highlight">Este texto também terá fundo amarelo.</p>
      <p class="special">Este texto não terá fundo amarelo.</p>
    
  

6.8 Seletor de Atributo com Hífen como Separador

O seletor de atributo com separação por hífen escolhe elementos cujo atributo contém o valor especificado ou começa com o valor especificado seguido por um hífen.

Sintaxe:

    
      [atributo|="valor"] {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      p[lang|="ru"] {
        font-style: italic;
      }
    
  

    
      <p lang="ru">Este texto será em itálico.</p>
      <p lang="ru-RU">Este texto também será em itálico.</p>
      <p lang="en">Este texto não será em itálico.</p>
    
  

1

Опрос

Fundamentos do CSS,  12 уровень,  6 лекция

недоступен

Fundamentos do CSS

Fundamentos do CSS

Открыть