Pular para o conteúdo principal

Questão de Programação — CSS (Cascading Style Sheets) — FGV 2025

ProgramaçãoCSS (Cascading Style Sheets)
Código
fg104527
Banca
FGV
Órgão
AL-AM
Ano
2025
Nível
Superior
Cargo
Analista Legislativo - Analista de Sistema
O Analista de Sistemas encontra um conflito de estilos em um elemento HTML que deveria estar com a cor azul, mas está com a cor vermelha. O CSS da página tem as seguintes regras aplicadas ao mesmo elemento:


1. div#identificador-principal { color: blue; }
2. .classe-alvo { color: red; }
3. div { color: green !important; }
4. Estilo inline no HTML: <div>


Assumindo que o elemento <div> possui a classe .classe-alvo e o id="identificador-principal", e que a regra inline é removida do HTML, assinale a opção que indica qual regra prevalecerá na determinação da cor e por quê
  1. ARegra 3 (color: green !important;), devido à palavra-chave !important
  2. BRegra 1 (color: blue;), devido à alta especificidade do seletor ID.
  3. CRegra 2 (color: red;), devido à ordem no CSS (última regra ganha).
  4. DRegra inline (se estivesse lá), pois tem a maior precedência.
  5. ERegra 2 (color: red;), pois seletores de classe sempre ganham de seletores ID.
Revelar gabarito e comentário

GabaritoA — Regra 3 (color: green !important;), devido à palavra-chave !important

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

CSS - Especificidade e !important

Gabarito: letra A. A regra 3 (div { color: green !important; }) prevalece porque a declaração com !important tem precedência sobre as demais, independentemente da especificidade do seletor, conforme as regras de cascata do CSS.

A banca testa o conhecimento sobre a hierarquia de precedência em CSS. A palavra-chave !important é o nível mais alto de prioridade, superando seletores inline, ID, classe, elemento e ordem de declaração. A única exceção é quando duas regras possuem !important: nesse caso, a de maior especificidade vence.

Alternativa A — ✅ Correta ⟵ GABARITO

A regra 3 contém !important, que a coloca acima de todas as outras regras sem !important. Mesmo que o seletor div seja genérico, a precedência do !important garante que a cor será verde.

Alternativa B — ❌ Incorreta

A regra 1 (div#identificador-principal) tem alta especificidade (ID + elemento), mas perde para qualquer declaração com !important. A especificidade só é comparada entre regras sem !important.

Alternativa C — ❌ Incorreta

A ordem no CSS (última regra ganha) só se aplica quando duas ou mais regras têm a mesma especificidade e nenhuma possui !important. Aqui a regra 3 tem !important, portanto a ordem é irrelevante.

Alternativa D — ❌ Incorreta

O enunciado afirma que o estilo inline foi removido. Portanto, não há regra inline para considerar. Caso existisse, o inline teria precedência sobre seletores (mas não sobre !important).

Alternativa E — ❌ Incorreta

Seletores de classe (.classe-alvo) não ganham de seletores de ID (#identificador-principal). A ordem de especificidade é: ID > classe/pseudo-classe/atributo > elemento/pseudo-elemento. A alternativa inverte essa hierarquia.

NÃO CAIA NESSA!

A alternativa E tenta fazer o candidato acreditar que classe sempre vence ID, quando na verdade ID é mais específico. Além disso, a presença do !important na regra 3 torna irrelevante a disputa entre os seletores 1 e 2.

Link permanente: /questoes/fg104527