Tipos de selectores en CSS1, CSS2 y CSS3

Tipos de selectores en CSS1, CSS2 y CSS3

12 de febrero 2013

Los selectores de CSS son identificadores para poder aplicar estilos a los elementos deseados. Hasta aquí, se supone que después de tanto tiempo trabajando con estilos, aclarar lo que es un selector es algo que sobra. Sin embargo, lo que no es habitual es saber los tipos de selectores que hay, sus funciones, cómo se pueden anidar y sobre todo, con la llegada de CSS3, cuáles son los nuevos.

Para ver todo ello nada mejor que irnos al grano y ver todos los selectores que existen, su sintaxis y funciones. La siguiente tabla la he extraído y traducido al castellano de la guía de referencia CSS del portal w3schools, ya que es muy completa. Algunos de ellos ya los vimos al hablar de las pseudoclases.

Selector Ejemplo Descripción del ejemplo CSS
.clase .titular Selecciona todos los elementos con class=»titular» 1
#id #menu Selecciona el elemento con id=»menu» 1
* * Selecciona todos los elementos 2
elemento p Selecciona todos los elementos <p> 1
elemento,elemento div,p Selecciona todos los <div> y todos los <p> 1
elemento elemento div p Selecciona todos los <p> dentro de los <div> 1
elemento>elemento div>p Selecciona todos los <p> donde el padre sea un <div> 2
elemento+elemento div+p Selecciona todos los <p> que estén inmediatamente después de un <div> 2
[attributo] [target] Selecciona todos los elementos con el atributo target 2
[attributo=valor] [target=_blank] Selecciona todos los elementos con target=»_blank» 2
[attributo~=valor] [title~=coche] Selecciona todos los elementos que contengan «coche» en el atributo title 2
[attributo|=valor] [lang|=en] Selecciona todos los elementos cuyo atributo lang comience por «en» 2
:link a:link Selecciona todos los enlaces no visitados 1
:visited a:visited Selecciona todos los enlaces visitados 1
:active a:active Selecciona los enlaces activos 1
:hover a:hover Selecciona los enlaces en estado rollover 1
:focus input:focus Seleccionan los input que tengan el focus 2
:first-letter p:first-letter Selecciona la primera letra de cada <p> 1
:first-line p:first-line Selecciona la primera línea de cada <p> 1
:first-child p:first-child Selecciona cada <p> que sea el primer hijo de otro elemento padre 2
:before p:before Inserta contenido antes de cada <p> 2
:after p:after Inserta contenido después de cada <p> 2
:lang(idioma) p:lang(es) Selecciona cada <p> cuyo valor del atributo lang sea «es» 2
elemento1~elemento2 p~ul Selecciona cada <ul> que sea precedido por un <p> 3
[attributo^=valor] a[src^=»https»] Selecciona cada <a> cuyo valor del atributo src comience con «https» 3
[attributo$=valor] a[src$=».pdf»] Selecciona cada <a> cuyo valor del atributo src termine con «.pdf» 3
[attributo*=valor] a[src*=»veteasabertu»] Selecciona cada <a> cuyo valor del atributo src contenga la subcadena «veteasabertu» 3
:first-of-type p:first-of-type Selecciona cada <p> que sea el primer <p> de un elemento padre 3
:last-of-type p:last-of-type Selecciona cada <p> que sea el último <p> de un elemento padre 3
:only-of-type p:only-of-type Selecciona cada <p> que sea el único <p> de su padre 3
:only-child p:only-child Selecciona cada <p> que sea el único elemento hijo de su padre 3
:nth-child(n) p:nth-child(2) Selecciona cada <p> que sea el segundo hijo de su padre 3
:nth-last-child(n) p:nth-last-child(2) Selecciona cada <p> que sea el segundo hijo de su padre, contando desde el último hijo 3
:nth-of-type(n) p:nth-of-type(2) Selecciona cada <p> que sea el segundo <p> de su padre 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selecciona cada <p> que sea el segundo <p> de su padre, contando desde el último hijo 3
:last-child p:last-child Selecciona cada <p> que sea el último hijo de su padre 3
:root :root Selecciona el elemento raíz del documento 3
:empty p:empty Selecciona cada <p> que no tenga hijos (incluyendo cadenas de texto) 3
:target #news:target Selecciona el actual estilo #noticia activo (al hacer click en una URL que contenga ese nombre de anchor) 3
:enabled input:enabled Selecciona cada <input> disponible 3
:disabled input:disabled Selecciona cada <input> no disponible 3
:checked input:checked Selecciona cada <input> marcado 3
:not(selector) :not(p) Selecciona todos los elementos que no sean <p> 3
::selection ::selection Selecciona la parte del texto que haya seleccionado el usuario (con el ratón por ejemplo) 3

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: ,

2 comentarios

  1. Joaquin Rua dice:

    Buen aporte, gracias!

Pingback

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Desliza para verificar