Ao criar sites multilíngues ou lidar com atributos de dados personalizados, você frequentemente precisa estilizar elementos com base no idioma que eles contêm ou em valores de dados específicos. Os atributos lang e data-lang são comumente usados para esses propósitos e o seletor de atributo no CSS permite que você aplique estilos com base nesses atributos de forma eficaz. O atributo lang é usado em HTML para especificar o idioma do conteúdo dentro de um elemento. Você pode querer estilizar elementos de forma diferente com base no idioma em que eles estão escritos, especialmente em um site multilíngue. Aqui está um exemplo de como você pode usar o seletor de atributo para direcionar elementos com um atributo lang específico:

<link rel="stylesheet" href="styles.css">
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>

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

Esta regra CSS aplica estilo em itálico a qualquer elemento de parágrafo onde o atributo lang esteja definido como inglês (en). Isso pode ser útil para enfatizar texto em inglês em um documento que inclui múltiplos idiomas. Da mesma forma, você pode usar o seletor de atributo para direcionar elementos com um atributo data-lang. Atributos de dados personalizados como data-lang são comumente usados para armazenar informações adicionais em elementos, como especificar o idioma usado dentro de uma seção específica de texto. Aqui está como você pode usar CSS para direcionar e estilizar elementos com base no atributo data-lang:

<link rel="stylesheet" href="styles.css">
<p data-lang="fr">Ceci est un paragraphe en français.</p>
<p data-lang="en">This is a paragraph in English.</p>

p[data-lang="fr"] {
  color: blue;
}

Neste caso, qualquer elemento p com um atributo data-lang definido como francês (fr) terá a cor do texto alterada para azul. Isso permite que você identifique e estilize rapidamente seções de conteúdo com base nas informações de idioma armazenadas no atributo data-lang. Seletores de atributo como estes fornecem uma maneira poderosa de aplicar estilos condicionais com base nos metadados incorporados no seu HTML, tornando suas páginas web mais dinâmicas e conscientes do contexto.