Pseudo-class
Pseudo-classe
Uma pseudo-classe faz parte de um seletor CSS. Ela encontra um elemento por uma condição, como estado, lugar, idioma ou ação do usuário.
Outro exemplo
Um formulário usa `:focus-visible` para o foco do teclado. Ele usa `:user-invalid` após a interação e `:disabled` quando o envio não está disponível. Usuários de toque não recebem um estilo de hover que permanece. Erros do servidor permanecem como texto real do DOM, não apenas como estilo de pseudo-classe.
Partes principais
- 01condição prefixada por dois pontos
- 02Estado do elemento correspondido
- 03declarações condicionais
Use-o quando
Use pseudo-classes padrão para estados reais do navegador. Mantenha o estado significativo e forneça feedback acessível também.
Não o use quando
Não armazene um estado importante do negócio apenas em hover, foco ou posição. Ele deve sobreviver a mudanças no método de entrada e na ordem do DOM.
Nome usado no código
:hover, :focus-visible, :checked, :disabled, :has(), :lang() Antes de lançar
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Pseudo-classe (Pseudo-class). User context: Um formulário usa `:focus-visible` para o foco do teclado. Ele usa `:user-invalid` após a interação e `:disabled` quando o envio não está disponível. Usuários de toque não recebem um estilo de hover que permanece. Erros do servidor permanecem como texto real do DOM, não apenas como estilo de pseudo-classe. Design concept to apply: Pseudo-classe (Pseudo-class). Why it fits: Use pseudo-classes padrão para estados reais do navegador. Mantenha o estado significativo e forneça feedback acessível também. Do not use it when: Não armazene um estado importante do negócio apenas em hover, foco ou posição. Ele deve sobreviver a mudanças no método de entrada e na ordem do DOM. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Pseudo-classe (Pseudo-class) is used now. Definition: Uma pseudo-classe faz parte de um seletor CSS. Ela encontra um elemento por uma condição, como estado, lugar, idioma ou ação do usuário. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.