Um Seletor de tipo (às vezes chamado de Seletor de tipo de elemento) combina elementos com o nome do nó do elemento correspondente, como
,
e
tags. Os seletores de tipo geralmente são usados para fazer alterações de "traço amplo" no estilo de um site.
p ( /* "p" is the type selector */ margin: 0 0 1em 0; )
Uso comum
Freqüentemente, os Seletores de tipo são definidos como padrões, como em uma redefinição de CSS em que a intenção é substituir os padrões do navegador. Um exemplo da primeira linha de normalize.css, uma redefinição CSS popular:
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )
Os Seletores de tipo acima estão definindo a propriedade de exibição dessas tags para bloquear, de modo que sempre que qualquer uma dessas tags for usada em todo o site, elas serão exibidas como bloco, a menos que sejam substituídas por um estilo mais específico.
Melhores Práticas
Geralmente, é considerado uma prática ruim aplicar alterações de detalhes finos apenas com um Seletor de tipo. Por exemplo, aplicar uma propriedade “color: white” de maneira geral a todas as
tags raramente seria algo útil em qualquer site. Isso ocorre porque as
tags são genéricas e são usadas em todos os sites para vários fins.
No entanto, com um Seletor de tipo como body ( )
, definir um padrão font-size
e line-height
é comum. Isso se deve em parte ao fato de que só pode haver uma tag em uma determinada página, portanto, há menos oportunidades de conflitos.
Especificação e desempenho do seletor de tipo
Os Seletores de tipo estão no nível mais baixo da cascata de especificidade (geralmente escrito como 0, 0, 0, 1), o que significa que quase tudo substituirá o estilo aplicado por meio de um Seletor de tipo sozinho e adicionando um Seletor de tipo a uma classe ou ID em seu CSS fornece especificidade extra mínima.
Os seletores de tipo também têm uma classificação inferior na escala de eficiência de CSS do que as classes e IDs. Portanto, é tecnicamente melhor escolha de desempenho utilizar uma classe ou um ID em vez do Seletor de tipo mais genérico (embora a diferença de velocidade real seja normalmente insignificante).
Suporte para navegador
cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
---|---|---|---|---|---|---|
Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum |