Skip to content

O que é um seletor CSS?

18 de maio de 2021

CSS depende de regras de correspondência de padrões para determinar qual estilo se aplica a qual elemento do documento. Esses padrões são chamados seletores e eles variam de nomes de tag (por exemplo, p

para combinar marcas de parágrafo) a padrões muito complicados que correspondem a partes muito específicas de um documento. Por exemplo, p # myid> b.highlight

corresponderia a qualquer b

tag com uma classe de destaque

aquele é um filho do parágrafo com o id myi

Um seletor CSS é a parte de uma chamada de estilo CSS que identifica qual parte da página da web deve ser estilizada. O seletor contém uma ou mais propriedades que definem como o tipo de HTML selecionado = “código”>

Os seletores CSS

Existem vários tipos diferentes de seletores:

  • seletores de tipo – combinando com um elemento específico
  • seletores de classe – combinando elementos com uma classe específica
  • Seletores de ID – combinando o elemento com um ID específico
  • seletores descendentes – elementos correspondentes que são descendentes de um elemento específico
  • seletores filho – elementos correspondentes que são filhos do elemento específico
  • seletores universais – combinando com qualquer elemento
  • seletores irmãos adjacentes – elementos correspondentes imediatamente precedidos por um elemento específico
  • seletores de atributo – combinando elementos com um atributo específico ou valor de atributo
  • Seletores de pseudoclasse – combinando elementos com uma pseudoclasse específica
  • Seletores de pseudoelementos – combinando elementos com propriedades específicas de pseudoelementos

Estilos CSS e seletores de formato CSS

O formato de um estilo CSS é semelhante a este: selector {style property: style; }

type = “code”> Separe vários seletores que têm o mesmo estilo com vírgulas. Isso é chamado de agrupamento de seletores. Por exemplo: selector1, selector2 {propriedade de estilo: estilo; }

type = “code”> Seletores de agrupamento são um mecanismo abreviado para manter seus estilos CSS compactos. O agrupamento acima teria o mesmo efeito que: selector1 {style property: style; }
selector2 {propriedade de estilo: estilo; }

type = “código”>

Sempre teste seus seletores CSS

Nem todos os navegadores mais antigos suportam todos os seletores CSS. Se você estiver configurando CSS para uso com navegadores tão antigos como o IE8 ou mais antigos, certifique-se de testar seus seletores em tantos navegadores em tantos sistemas operacionais quantos você acha que podem ser usados ​​para acessar seu código. Se você estiver usando seletores CSS1, CSS2 ou CSS3 para uso com os navegadores atuais, não terá problemas.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “O que é um seletor CSS?” ThoughtCo, maio. 14 de 2021, thinkingco.com/what-is-a-css-selector-3467058.
Kyrnin, Jennifer. (2021, 14 de maio). O que é um seletor CSS? Obtido em https://www.thoughtco.com/what-is-a-css-selector-3467058
Kyrnin, Jennifer. “O que é um seletor CSS?” ThoughtCo. https://www.thoughtco.com/what-is-a-css-selector-3467058 (acessado em 18 de maio de 2021).