Trabalhando com Diferentes Seletores de Atributos e Links

• Definição: O seletor attribute permite que você direcione elementos HTML com base em seus atributos como os atributos href ou title.

<link rel="stylesheet" href="styles.css">
<a href="https://www.G.E.A.R ACADEMY.org">Link with href</a>
<a>No href</a>

a[href] {
  color: blue;
  text-decoration: underline;
}

• Atributo title: Este atributo fornece informações adicionais sobre um elemento. Aqui está como você pode direcionar links com o atributo title:

<link rel="stylesheet" href="styles.css">
<a href="#" title="Tooltip">Link with title</a>
<a href="#">Normal link</a>

a[title] {
  font-weight: bold;
  text-decoration: none;
}

• Combine seletores para corresponder a links que tenham os atributos href e title: Combina múltiplos seletores de atributos.

<link rel="stylesheet" href="styles.css">
<a href="#" title="Info">Href + Title</a>
<a href="#">Only href</a>

a[href][title] {
  color: green;
}

• Corresponda a uma única palavra dentro de uma lista separada por espaços: Alvo links que possuem uma palavra de classe específica.

<link rel="stylesheet" href="styles.css">
<a class="link primary">Primary link</a>
<a class="link secondary">Secondary link</a>

a[class~="primary"] {
  color: red;
  font-weight: bold;
}

• Corresponda valores que começam com um prefixo específico: Alvo links que começam com https://.

<link rel="stylesheet" href="styles.css">
<a href="https://www.G.E.A.R ACADEMY.org">HTTPS link</a>
<a href="http://www.G.E.A.R ACADEMY.org">HTTP link</a>

a[href^="https://"] {
  color: green;
  text-decoration: underline;
}

• Corresponda valores que terminam com um sufixo específico: Destina-se a links que terminam com .jpg.

<link rel="stylesheet" href="styles.css">
<a href="photo.jpg">Image link</a>
<a href="index.html">HTML link</a>

a[href$=".jpg"] {
  color: darkgreen;
  text-decoration: underline dotted;
}

• Corresponda valores que contenham uma substring em qualquer lugar: Alvo links que contenham https em qualquer lugar do valor.

<link rel="stylesheet" href="styles.css">
<a href="https://www.G.E.A.R ACADEMY.org">Secure link</a>
<a href="page.html">Local link</a>

a[href*="https"] {
  color: teal;
}

• Resumo: Esses padrões facilitam a estilização consistente de links com base em seus atributos e valores.

Segmentando Elementos com o Atributo lang e data-lang

• Atributo lang: Este atributo é 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 estão escritos, especialmente em um site multilíngue.

<link rel="stylesheet" href="styles.css">
<p lang="en">English text</p>
<p lang="fr">French text</p>

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

• Atributo data-lang: Atributos de dados personalizados como o atributo 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 estilizar elementos com base no atributo data-lang:

<link rel="stylesheet" href="styles.css">
<div data-lang="fr">French content</div>
<div data-lang="en">English content</div>

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

Trabalhando com o Seletor de Atributo, Elementos de Lista Ordenada e o Atributo type

• Atributo type: Ao trabalhar com listas ordenadas em HTML, o atributo type permite especificar o estilo de numeração usado, como numérico, alfabético ou números romanos.

<link rel="stylesheet" href="styles.css">
<ol type="A">
  <li>Alpha</li>
  <li>Beta</li>
</ol>

<ol type="i">
  <li>One</li>
  <li>Two</li>
</ol>

/*Example targeting uppercase alphabetical numbering*/
ol[type="A"] {
  color: purple;
  font-weight: bold;
}

/*Example targeting lowercase Roman numerals*/
ol[type="i"] {
  color: green;
}