Questão de Programação — Linguagens de marcação — VUNESP 2023

CSS: Seletores e Propriedade text-align

Gabarito: letra D. Para alinhar à direita apenas os valores numéricos da última coluna, sem afetar o título ou outras colunas, é preciso selecionar especificamente as células que contêm esses valores. No HTML fornecido, essas células têm a classe cur, então a regra correta é .cur { text-align: right; } — o seletor de classe .cur atinge apenas os elementos com essa classe, e a propriedade text-align é a que controla o alinhamento horizontal do texto.

A questão testa dois conhecimentos básicos de CSS: a sintaxe dos seletores e a propriedade correta para alinhamento horizontal. Vamos entender cada um.

Seletores CSS: Um seletor determina a quais elementos HTML uma regra de estilo se aplica. Os principais tipos são:

• Seletor de tipo (ou elemento): td — seleciona todos os elementos <td> da página.

• Seletor de classe: .cur — seleciona todos os elementos que possuem class="cur" no HTML. O ponto (.) antes do nome indica que é uma classe.

• Seletor de ID: #id — seleciona o elemento com aquele id específico (não usado aqui).

Propriedade de alinhamento: A propriedade CSS que controla o alinhamento horizontal do texto dentro de um elemento é text-align. Ela aceita valores como left, right, center e justify. Não existe a propriedade horizontal-align em CSS — essa é uma invenção que aparece em alternativas para confundir.

Aplicando ao problema: O objetivo é alinhar à direita apenas os valores numéricos (3000,00 e 2500,00), que estão nas células <td class="cur">. O título da coluna (<th>Preco</th>) e as outras colunas (<td class="str">) não devem ser afetados.

• Usar td { text-align: right; } (alternativa A) afetaria todas as células <td>, incluindo as colunas de texto (Notebook, A, Tablet, B) — errado.

• Usar .cur { text-align: right; } (alternativa D) afeta apenas as células com classe cur, que são exatamente os valores numéricos — correto.

A pegadinha da banca está em duas frentes: (1) trocar a propriedade correta text-align por uma inexistente horizontal-align; (2) usar o seletor de elemento td em vez do seletor de classe .cur, o que quebraria o requisito de não afetar outras colunas.

Alternativa A — ❌ Incorreta

td { text-align: right; } usa o seletor de elemento td, que seleciona todas as células de dados da tabela. Isso alinharia à direita também as colunas de texto (Notebook, A, Tablet, B), violando o requisito de não alterar outras colunas. O seletor é amplo demais para o objetivo.

Alternativa B — ❌ Incorreta

td { horizontal-align: right; } usa a propriedade horizontal-align, que não existe em CSS. A propriedade correta para alinhamento horizontal é text-align. Além disso, o seletor td também é amplo demais, afetando todas as células de dados.

Alternativa C — ❌ Incorreta

.cur { horizontal-align: right; } usa o seletor de classe .cur, que é o correto, mas a propriedade horizontal-align não existe. Sem a propriedade válida, a regra não produz nenhum efeito no navegador.

Alternativa D — ✅ Correta ⟵ GABARITO

.cur { text-align: right; } combina o seletor de classe .cur (que atinge apenas as células com class="cur", ou seja, os valores numéricos) com a propriedade text-align: right (que alinha o texto à direita). Isso atende exatamente ao requisito: alinha apenas a última coluna de dados, sem afetar o título (<th>) nem as outras colunas (class="str").

Alternativa E — ❌ Incorreta

cur { horizontal-align: right; } tem dois erros: (1) falta o ponto (.) antes de cur, então o navegador interpreta cur como um seletor de elemento (tag <cur>), que não existe no HTML — a regra não se aplica a nada; (2) usa a propriedade inexistente horizontal-align.

Resumo: Para alinhar apenas células específicas, use o seletor de classe (.cur) e a propriedade text-align. O seletor de elemento (td) é genérico demais, e horizontal-align não é uma propriedade CSS válida.

Gabarito: letra D