Questão de Engenharia de Software — Desenvolvimento de Software — FUNDATEC 2025

Especificidade e cascata no CSS

Gabarito: letra B. O seletor que utiliza o ID (#destaques) possui a maior especificidade entre as regras conflitantes, sobrepondo-se às definições baseadas em classes e elementos, resultando na cor vermelha. A especificidade é o critério primário que o navegador usa para resolver conflitos de estilo, e um ID vale mais que qualquer combinação de classes e elementos.

A especificidade é o mecanismo que o CSS usa para decidir qual regra se aplica quando há conflito. Cada seletor tem um peso calculado por seus componentes: IDs, classes, atributos, pseudo-classes e elementos. A regra é que, quanto mais específico o seletor, maior sua prioridade, independentemente da ordem de declaração. Isso é fundamental para entender como o navegador resolve conflitos de estilo.

O cálculo da especificidade é feito por uma tríade de valores: (a, b, c), onde 'a' é o número de IDs, 'b' é o número de classes, atributos e pseudo-classes, e 'c' é o número de elementos e pseudo-elementos. Compara-se primeiro 'a', depois 'b' e por fim 'c'. Quem tiver o maior valor no primeiro critério vence, sem necessidade de olhar os demais.

Por exemplo, um seletor #destaques tem especificidade (1, 0, 0). Um seletor article.promocao h1 tem (0, 1, 1), pois tem uma classe e dois elementos. Um seletor .titulo-principal tem (0, 1, 0). Um seletor .post h1 tem (0, 1, 1). Comparando, o ID (1, 0, 0) é maior que qualquer valor que comece com 0, então a regra do ID vence.

A ordem de declaração só é usada como critério de desempate quando dois seletores têm a mesma especificidade. Nesse caso, a última regra declarada vence. Mas aqui, como o ID tem especificidade superior, a ordem não importa.

A pegadinha desta questão é que o candidato pode se confundir com a ordem de declaração ou com a quantidade de classes, mas a regra do ID é absoluta. A alternativa A tenta justificar pela "descritividade" e combinação de classes, mas isso não supera um ID. A alternativa C tenta usar a proximidade do elemento, mas isso não é critério. A alternativa D apela para a ordem, mas a especificidade vem antes. A alternativa E é um absurdo, pois o navegador não ignora regras complexas.

Guarde a hierarquia: ID > classe > elemento. É exatamente nessa fronteira que as alternativas se dividem.

Alternativa A — ❌ Incorreta

Afirma que a regra article.promocao h1 é a mais descritiva e combina dois seletores de classe, tornando-a prioritária. O erro está em considerar a "descritividade" ou a quantidade de classes como critério superior. A especificidade de article.promocao h1 é (0, 1, 1), que é menor que a do ID (1, 0, 0). A combinação de classes não supera um ID.

Alternativa B — ✅ Correta ⟵ GABARITO

A regra #destaques tem especificidade (1, 0, 0), que é a maior entre as regras conflitantes. O ID é o seletor com maior peso na especificidade, sobrepondo-se a classes e elementos. Portanto, a cor aplicada é a definida por essa regra, que é vermelho.

Alternativa C — ❌ Incorreta

Afirma que a classe .titulo-principal aplicada diretamente no elemento tem prioridade sobre as regras que estilizam com base nos elementos pais. O erro é que a proximidade do elemento não é critério de especificidade. A classe .titulo-principal tem especificidade (0, 1, 0), que é menor que a do ID (1, 0, 0).

Alternativa D — ❌ Incorreta

Afirma que a regra .post h1 é a última regra baseada em classe e que a ordem de declaração é critério de desempate. A ordem de declaração só é usada quando há empate de especificidade. Como o ID tem especificidade superior, a ordem não é considerada. A especificidade de .post h1 é (0, 1, 1), menor que a do ID.

Alternativa E — ❌ Incorreta

Afirma que o navegador ignora regras complexas e aplica apenas o estilo mais básico. Isso é falso. O navegador aplica todas as regras e resolve conflitos pela especificidade, não ignora regras por complexidade.

Gabarito: letra B