Tipos de Seletores CSS – Avançado

Tipos de Seletores CSS – Avançado

O que são seletores?

            Seletor é uma entidade que faz parte da regra CSS e define o alvo dessa regra. O alvo é um elemento integrante da árvore do documento HTML (ou elementos). Vejamos a sintaxe da regra CSS:

seletor {propriedade: valor;}

A formatação definida entre as chaves será aplicada ao(s) elemento(s) selecionado(s).

Um seletor pode ser simples ou combinado. Um seletor simples é um seletor qualquer sozinho, já um seletor combinado consiste de dois ou mais seletores simples separados por um elemento de combinação. Os elementos de combinação são o espaço em branco, o sinal maior que (>) e o sinal de adição (+). Esses elementos de combinação definem respectivamente o seletor descendente, o seletor filho e o seletor adjacente filho do mesmo pai (irmão).

Existem também os seletores de pseudo-classes e de pseudo-elementos que se baseiam em informações que não estão presentes na árvore do documento HTML, mas que funcionam como um apêndice a um seletor que tem como alvo um elemento que integra essa árvore. São caracterizados por dois-pontos que os antecedem. Apenas o último seletor simples que faz parte de um seletor combinado pode possuir esse apêndice.

             A seguir, com base nas especificações CSS 2.1, 5 - Selectors, do W3C, são apresentados os seletores CSS 2, seu formato e sua descrição.

Padrão	Significado	Exemplo CSS	Exemplo (X)HTML
*	Seletor universal: qualquer elemento	* { color: #000000;  }	Aplicável a todos os elementos
e	Seletor de tipo de elemento: seleciona qualquer elemento <e>	e { font-family: sans-serif;}	<e> ... </e>
e f	Seletor contextual: seleciona qualquer elemento <f> que estiver contido num elemento <e>	h1 em { color: blue; }	<e>...<f>....</f>...</e>
e > f	Seletor de elementos-filho: seleciona qualquer elemento <f> descendente direto de um elemento <e>	body > p { line-height: 1.3;  }	<e>...<f>...</f>...</e>
e + f	Seletor adjacente: seleciona o elemento <f> que estiver imediatamente após um elemento <e>	h1 + h2 { margin-top: -5mm; }	<e>...<f> </f>...</e>
e.classe	Seletor de classe: seleciona o(s) elemento(s) <e> em que se aplicou a "classe"	h1.pastoral { color: green; }	<e class="classe"... />
e#Id	Seletor de ID: seleciona o elemento <e> identificado com Id	h1#chapter1 { text-align: center; }	<e id="Id"... />
e , f	Agrupamento de seletores: Seleciona os elementos <e> e <f> do agrupamento	h1, h2 { font-family: sans-serif; }	<e> … </e> … <f> … </f>
e [atrib]	Seletor de Atributo: seleciona o elemento <e> que contenha o atributo indicado	h1[title] { color: blue;  }	<e atrib="valor" ... />
e [atrib="valor"]	Seletor de Atributo: seleciona o elemento <e> com o mesmo atributo e “valor”	span[class=exemplo] { color: blue;  }	<e class="exemplo" ... />
e [atrib~="valor"]	Seletor de Atributo: seleciona o elemento <e> em que “valor” de atributo esteja em uma lista de valores separadas por espaços	a[rel~="copyright"]{ color: red;  }?	<a rel="copyright copyleft copyeditor"...> … </a>
e [atrib|="val"]	Seletor de Atributo: seleciona o elemento <e> em que valor do atributo seja idêntico a “val” ou inicia-se com “val”	*[lang|="pt"] { color: red;  }	<e lang="pt-BR" .../>
e:first-child	Pseudo-classe primeiro filho: seleciona o primeiro elemento <e> descendente do elemento-pai	div > p:first-child { text-indent: 0;  }	<P> Último P antes de 'nota' <DIV class="nota"> <P> Primeiro P após nota'. </DIV>
a:link	Pseudo-classe link: aplica-se ao elemento <a> com hiperlinks ou âncoras ainda não visitados	a:link { color: red; }	<a href="http://endereço.link/">link</a>
a:visited	Pseudo-classe visited: aplica-se ao elemento <a> com hiperlinks ou âncoras já visitados	a:visited { color: blue;  }	<a href="http://endereço.link/">link</a>
e:active	Pseudo-classe active: aplica-se ao elemento <e> quando este for ativado pelo usuário	a:active { color: lime;  }	<a href="http://endereço.link/">link</a>
e:hover	Pseudo-classe hover: aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo	a:hover { color: yellow;  }	<a href="http://endereço.link/">link</a>
e:focus	Pseudo-classe focus: aplica-se ao elemento <e> quando o foco estiver posicionado nele	a:focus { background: yellow;  }	<a href="http://endereço.link/">link</a>
e:lang(val)	Pseudo-classe lang: aplica-se ao elemento <e> se este estiver marcado com o idioma “val”	html:lang(pt) {quotes: '« ' ' »'; }	<e lang="pt" ... />
e:first-line	Pseudo-elemento first-line: aplica-se à primera linha do elemento <e>	p:first-line { text-transform: uppercase; }	<e>...</e>
e:first-letter	Pseudo-elemento first-letter: aplica-se à primera letra do elemento <e>	p:first-letter { font-size: 3em; font-weight: normal;  }	<e>...</e>
e:before	Pseudo-elemento before: aplica conteúdo especificado em posição anterior ao elemento <e>	e:before { content: open-quote;  }	<e>...</e>
e:after	Pseudo-elemento after: aplica conteúdo especificado em posição posterior ao elemento <e>	e:after { content: close-quote; }	<e>...</e>