Ícone do site Geek Project

Seletores CSS

Em CSS, seletores são padrões usados para selecionar o elemento (s) que deseja estilo.
O “CSS” coluna indica a versão na qual CSS a propriedade é definida (CSS1 ou CSS2).

Selector Exemplo Exemplo Seleciona: CSS
. classe .intro Todos os elementos com a classe “intro” 1
# id #firstname O elemento com id = “nome” 1
* * Todos os elementos 2
elemento p Todos os elementos <p> 1
elemento, o elemento div,p Todos os elementos <div> e todos os elementos <p> 1
elemento elemento div p Todos os elementos dentro de elementos <p> <div> 1
elemento > elemento div>p Todos os elementos <p> onde o pai é um elemento <div> 2
elemento + elemento div+p Todos os elementos <p> colocado imediatamente após um elemento <div> 2
[ atribuem ] [target] Todos os elementos com um atributo target 2
[ atributo = valor ] [target=_blank] Todos os elementos com um atributo target igual a “_blank” 2
[ atributo ~ = valor ] [title=flower] Todos os elementos com um atributo de título que contém palavras separadas por espaços, um dos quais é a “flor” 2
[ atributo | = língua ] [lang|=en] Todos os elementos, onde o valor do atributo lang é “en”, mesmo se o valor contiver um hífen (-), como “en-us” 2
: Link a:link Todos os links (<a> elementos com href) 1
: Visited a:visited Todos os links visitados 1
: Ativo a:active Links ativos 1
: Hover a:hover Links sobre o mouse sobre o 1
: Foco input:focus O elemento de entrada que tem o foco 2
: First-letter p:first-letter A primeira letra de todos os elementos <p> 1
: First-line p:first-line A primeira linha de todos os elementos <p> 1
: First-child p:first-child Todos os elementos <p> que é o primeiro filho de seu pai 2
: Antes p:before O conteúdo será colocado antes de cada elemento <p> 2
: Após p:after O conteúdo será colocado após cada elemento <p> 2
: Lang ( linguagem ) p:lang(it) Todos os elementos <p> com o atributo lang com “ele” 2



Fonte: W3C

Sair da versão mobile