A especificidade do CSS é um conceito fundamental que determina quais estilos são aplicados a um elemento quando múltiplas regras podem ser aplicadas. Entender a especificidade ajuda os desenvolvedores a resolver conflitos entre diferentes regras CSS e garante que os estilos desejados sejam aplicados consistentemente. A especificidade do CSS é calculada com base no tipo de seletores usados. A maior especificidade é atribuída aos estilos inline, que são aplicados diretamente a um elemento através do atributo style. Neste exemplo, o primeiro parágrafo será vermelho enquanto os outros elementos p serão azuis. Isso ocorre porque estilos inline têm uma especificidade maior do que seletores de tipo como o seletor p mostrado no arquivo styles.css.

<link rel="stylesheet" href="styles.css">

<p style="color: red;">Red paragraph</p>
<p>Other paragraph</p>
<p>Another paragraph</p>
<p>Yet another paragraph</p>

p {
  color: blue;
}

Em seguida, seletores de ID têm um alto nível de especificidade.

<link rel="stylesheet" href="styles.css">

<p id="para">Red paragraph</p>
<p>Other paragraph</p>
<p>Another paragraph</p>
<p>Yet another paragraph</p>

#para {
  color: red; 
}

p {
  color: blue;
}

Em seguida, entram em cena os seletores de classe, seletores de atributo e pseudo-classes. Exemplos incluem seletores de classe como .container e .button, seletores de atributo como [type="text"] e pseudo-classes como :hover. Estes têm um nível moderado de especificidade. NOTA: Você aprenderá mais sobre pseudo-classes em lições futuras. Neste exemplo, o primeiro parágrafo ficará vermelho porque um seletor id tem uma especificidade maior do que classes e seletores de tipo. Os elementos .example-para terão a cor verde enquanto os parágrafos restantes terão a cor azul.

<link rel="stylesheet" href="styles.css">

<p id="para">Example paragraph</p>
<p class="example-para">Other paragraph</p>
<p class="example-para">Another paragraph</p>
<p>Yet another paragraph</p>

#para {
  color: red; 
}

.example-para {
  color: green;
}

p {
  color: blue;
}

Seletores de tipo, como div e h1, e pseudo-elementos como ::before e ::after, têm uma especificidade menor em comparação com os grupos anteriores. NOTA: Você aprenderá mais sobre pseudo-elementos em lições futuras.

<link rel="stylesheet" href="styles.css">

<p id="para">Example paragraph</p>
<p>Other paragraph</p>
<p>Yet another paragraph</p>

#para {
  color: red; 
}

p {
  color: blue;
}

Finalmente, o seletor universal, representado por um asterisco *, tem a menor especificidade de todas. Aqui está um exemplo de como definir a cor de todos os elementos para vermelho usando o seletor *. No entanto, você não verá nenhum elemento vermelho porque existem seletores de ID e tipo que substituem esses estilos, o que destaca a baixa especificidade do seletor *.

<link rel="stylesheet" href="styles.css">

<p id="para">Example paragraph</p>
<p>Other paragraph</p>
<p>Yet another paragraph</p>

* {
  color: red;
}

#para {
  color: green; 
}

p {
  color: blue;
}

Os valores de especificidade são calculados como um valor de quatro partes (a, b, c, d):

• a: Estilos inline (1 ou 0).
• b: Número de seletores de ID.
• c: Número de seletores de classe, seletores de atributo e pseudo-classes.
• d: Número de seletores de tipo, pseudo-elementos e seletores universais.

Cada parte do valor de especificidade carrega pesos diferentes:

• Estilos inline (a) têm o maior peso, contribuindo com um valor de 1 para a primeira parte do valor de especificidade.
• Seletores de ID (b) têm o próximo peso mais alto, com cada ID contribuindo com 1 para a segunda parte do valor de especificidade.
• Seletores de classe, seletores de atributo e pseudo-classes (c) têm peso moderado, com cada um contribuindo com 1 para a terceira parte do valor de especificidade.
• Seletores de tipo e pseudo-elementos (d) têm o menor peso, com cada um contribuindo com 1 para a quarta parte do valor de especificidade.
• Seletor universal (*): O seletor universal contribui com 0 para o cálculo de especificidade e não afeta a especificidade. Sua inclusão em um seletor não altera o valor da especificidade.

CSS inline tem a maior especificidade porque é aplicado diretamente ao elemento. Ele substitui qualquer CSS interno ou externo. O valor de especificidade para estilos inline é (1, 0, 0, 0). Aqui está outro exemplo de um estilo inline:

<p style="color: red;">This text is red.</p>

CSS interno é definido dentro de um elemento style na seção head do documento HTML. Ele tem especificidade menor do que estilos inline. Tanto o CSS interno quanto o externo compartilham o mesmo nível de especificidade — a especificidade é determinada pelos seletores usados, não pelo local onde o CSS é definido. Quando duas regras têm especificidade igual, a que aparece depois no documento vence. Então, se uma folha de estilo externa é linkada depois de um bloco interno style, as regras externas têm precedência. Se for linkada antes, as regras internas vencem. O valor de especificidade para estilos internos é determinado pelos seletores usados. Por exemplo, um seletor ID dentro do CSS interno tem um valor de especificidade de (0, 1, 0, 0).

<head>
  <style>
    #text {
      color: blue;
    }
  </style>
</head>
<body>
  <div id="text">This text is blue.</div>
</body>

Neste exemplo, o texto ficará azul a menos que um estilo inline ou um seletor mais específico seja aplicado. CSS externo é vinculado via um link elemento na head seção e é escrito em .css arquivos separados. Como o CSS interno, a especificidade dos estilos externos é determinada pelos seletores usados. O CSS externo oferece a melhor manutenção para projetos maiores. O valor de especificidade para estilos externos também é determinado pelos seletores usados. Por exemplo, um seletor de classe dentro de CSS externo tem um valor de especificidade de (0, 0, 1, 0).

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="text">This text's color is defined in an external CSS file.</div>
</body>

.text {
  color: purple;
}

Neste exemplo, a cor do texto é definida no arquivo styles.css e será aplicada a menos que seja substituída por um seletor mais específico ou um estilo inline.