Selectores

Na seguinte táboa amoso os principais selectores que podemos empregar na nosa regra de estilos:

Selector	Descrición	Aplicación no HTML
Selectores básicos
etiqueta Onde etiqueta e o nome dunha etiqueta HTML	Selecciona todos os elementos da páxina cuxa etiqueta HTML coincide co valor do selector. Exemplo: h1 (selecciona todos os  h1 da páxina web)	<etiqueta>
.clase Onde .clase e o nome dunha clase	Selecciona todos os elementos da páxina que pertenzan a unha determinada clase.  Exemplo:.par (selecciona todos os elementos que pertenzan á clase par da páxina Web)	<etiqueta class="clase">
#identificador Onde #identificador e o nome dun identificador	Selecciona o elemento da páxina que pertenzan a un determinado identificador.  Exemplo: #taboa_principal (selecciona o elemento que teña o identificador taboa_principal da páxina Web - so pode haber un identificador co mesmo nome na páxina Web -)	<etiqueta id="identificador">
*	Selecciona todos os elementos da páxina.
selector1  selector2	Selecciona os elementos (selector2) que están dentro de outros elementos (selector1).  Exemplo: div p (selecciona todos p que estean dentro de un div)
selector1 > selector2	Parecido ao anterior pero máis restritivo, xa que selecciona os elementos (selector2) que son fillos directos de selector1.  Exemplo: div .par (selecciona todos elementos que pertenzan á clasepar que sean fillos de un div)
selector1 ~ selector2	Selecciona os elementos (selector2) que son irmáns de selector1.  Exemplo: h1 ~ p (selecciona todos p que son irmáns de un h1)
selector1 + selector2	Parecido ao anterior pero máis restrictivo, xa que selecciona os elementos (selector2) que están a continuación de selector1.  Exemplo: div + #paragrafo01 (selecciona o elemento que ten o identificador paragrafo01 que estea a continuación de un div)
selector1 , selector2	Agrupación de selectores: Selecciona os elementos selector1 e selector2.  Exemplo: div, p, .par, #principal (selecciona todos div, todos os p, todos os elementos que pertenzan a clase par e os que teñen o identificador principal )
Pseudo-Clases
selector:hover	Selecciona os elementos (selector) cando pasamos o rato por riba deles.  Exemplo: a:hover (selecciona todos os enlaces da páxina pero cando pasemos o rato por riba deles)
selector_enlace:visited	Selecciona as ligazóns (selector_enlace) sempre que fosen xa visitadas polo navegador onde se abra a páxina.  Exemplo: a.clase:visited (selecciona todos os enlaces que pertenzan a clase clase sempre que xa fosen visitados polo navegador que está abrindo a páxina Web)
selector_enlace:link	Selecciona as ligazóns (selector_enlace) sempre que non fosen xa visitadas.  Exemplo: a#ident:link (selecciona o enlace que teña o identificador ident que non fose visitado polo navegador)
selector:first-child	Selecciona o primeiro elemento dos elementos fillos (selector) dun selector pai.  Exemplo: li:first-child (selecciona o primeiro li dunha lista)
selector:last-child	Selecciona o último elemento dos elementos fillos (selector) dun selector pai.  Exemplo: li:last-child (selecciona o último li dunha lista)
selector:ntd-child(N)	Selecciona o elemento que ocupa a posición N dos elementos fillos (selector) dun selector pai. Exemplos: td:ntd-child(even) (seleccina os td pares) , td:ntd-child(odd) (selecciona todos os td impares) ou li:ntd-child(2) (selecciona o segundo td)
selector1:not(selector2)	Selecciona os elementos (selector1) que non coincidan con selector2.   Exemplo: td:not(.clase) (seleciona todo os td que NON pertenzan á clase clase
Pseudo-Elementos
selector::first-letter	Selecciona a primeira letra do texto que contén a etiqueta ou etiquetas seleccionadas co selector.  Exemplo: p::first-letter (selecciona a primeira letra de todos o parágrafos)
selector::first-line	Selecciona a primeira liña do texto que contén a etiqueta ou etiquetas seleccionadas co selector.  Exemplo: p::first-line (selecciona a primeira fila de todos parágrafos)
selector::before	Posiciónase antes da etiqueta ou etiquetas seleccionadas co selector.  Exemplo: p#ident::before (nos posicionamos antes do parágrafo co identificador ident)
selector::after	Posiciónase despois da etiqueta ou etiquetas seleccionadas co selector.  Exemplo: p#ident::after (nos posicionamos despois do parágrafo co identificador ident)
selector::selection	Selecciona o texto dentro do selector cando o usuario o seleccione co rato.  Exemplo: p.principal::selection (seleccionamos aquel parágrafo que pertence a clase principal cando este estea seleccionado polo usuario)
Selectores de atributos
selector[nome_atributo]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo.  Exemplo:p[class] (selecciona os p que teñen posto o atributo class)
selector[nome_atributo="valor"]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo e que teña un valor igual a valor.  Exemplo: p[class="principal"] (selecciona os p que teñan posto o atributo class="principal")
selector[nome_atributo~="valor"]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo e polo menos un dos valores do atributo é valor.  Exemplo: p[class~="principal"](selecciona os p que teñan posto o atributo class e polo menos un dos valores dese atributo sexa principal)
selector[nome_atributo^="texto"]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo e que teña un valor que comece por texto.  Exemplo: a[href^="mailto:"](selecciona os a que teñan posto o atributo href cuxo valor comeza por mailto:, e decir, selecciona todos os enlaces a correos electróncos)
selector[nome_atributo*="texto"]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo e que teña un valor que conteña texto.  Exemplo: a[href*="drodicio"] (selecciona os a que teñan posto o atributo href cuxo valor conteña drodicio, e decir, selecciona todos os enlaces da páxina que vaían a unha dirección que conteña a palabra drodicio)
selector[nome_atributo$="texto"]	Selecciona os elementos (selector) que teñen establecido o atributo chamado nome_atributo e que teña un valor que remate en texto.  Exemplo: a[href$=".com"] (selecciona os a que teñan posto o atributo href que remate en .com, é decir, selecciona todos os enlaces que vaían a unha páxina que remate en .com)