Selectores CSS y jQuery (IX). Tabla resumen de selectores.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

A lo largo de los artículos anteriores hemos recopilado y analizado todos los posibles selectores con que cuenta CSS 3. Al final de cada artículo hemos incluido una tabla resumen de los selectores contemplados en el mismo.

Este artículo es sólo una recopilación de dichas tablas, para que las tengas juntas a mano, a modo de referencia o consulta. Espero que te resulten de utilidad.

TABLA RESUMEN DE SELECTORES CSS Y JQUERY

SELECTORES SIMPLES
TIPO DE SELECTOR EJEMPLO COMENTARIOS
Universal * Afecta a todos los elementos de un documento web.
De etiqueta span Se indica mediante el nombre de la etiqueta a la que queremos afectar con la regla CSS o la instrucción jQuery. El nombre de la etiqueta no se precede con ningún guarismo especial. Afecta a todos los elementos que estén dentro de una etiqueta como la empleada para definir la regla CSS (excepto en casos concretos, que mencionaremos en artículos posteriores).
De identificador #mi_elemento Afecta al elemento HTML que tenga aplicado el atributo id con el valor que hemos referenciado en la regla CSS. El valor de un id sólo puede aplicarse a un elemento en la página, por lo que este es un selector extremadamente restrictivo. Tanto en CSS cómo en jQuery, se precede el nombre del identificador con el guarismo #.
De clase .mi_clase Afecta a todos los elementos que tienen el atributo class con el valor que coincide con el nombre de la clase referenciada en la regla CSS. Se precede el nombre de la clase con un punto (.).
SELECTORES COMPUESTOS
TIPO DE SELECTOR EJEMPLO COMENTARIOS
Agrupaciones h1, span, .miContenedor Cuando se ponen varios selectores independientes separados por comas, se hace referencia a todos los elementos del documento HTML que respondan a cualquiera de los selectores. En el ejemplo, todos los elementos h1, span, o con la clase miContenedor. Por supuesto, si hubiera elelementos que cumplan con más de uno de los selectores, también están incluidos. Es decir, si tenemos un elemento declarado como <span class="miContenedor"> también se ve afectado.
Selectores descendentes p span Se refiere a todos los selectores referidos en el segundo lugar que estén anidados, directa o indirectamente, dentro de los selectores referidos en el primer lugar. En el ejemplo nos referimos a todos los elementos span que estén anidados dentro de un elemento p, ya sea directa o indirectamente.
Selectores de hijos p>span Se refiere a los elementos que están anidamos dentro de otro, siempre que estén anidados directamente. En el ejemplo, nos referimos a los elementos span que están anidados en el primer nivel dentro de un elemento p. Si hubiera un span dentro de un div y este, a su vez, dentro de un p, este span no se vería afectado.
Selectores adyacentes div+p Se refiere a todos los elementos que están justo a continuación de otro. En el ejemplo, a un elemento p que estén justo a continuación de un div. Solo afectará al primer elemento detras de un div, si este es p. Si detrás de un div hubierá, por ejemplo, un h1, no se verá afectado. Si encontramos un elemento p detrás de dicho h1, tampoco. Solo si el elemento p está justo a continuación del div.
Selectores de atributo *[name], *[type="text"], *[class~="campo_obligatorio"], *[lang|="es"] Afectará a los elementos que tengan asignado un atributo, o que tengan asignado un atributo con determinado valor, o que el valor del atributo contenga la secuencia especificada.
PSEUDO ELEMENTOS
TIPO DE SELECTOR COMENTARIOS
::before Se refiere al añadido que se puede incluir antes de cada elemento.
::after Se refiere al añadido que se puede incluir después de cada elemento.
::first-letter Se refiere a la primera letra del contenido literal de un elemento.
::first-line Se refiere a la primera línea del contenido literal de un elemento.
::selection Se refiere al elemento (o una parte de este) que es seleccionada con el ratón.
PSEUDO CLASES DE ESTADO
SELECTOR COMENTARIOS
:link Se aplican las reglas CSS definidas a los enlaces que aún no han sido visitados por el usuario.
:active Se aplican las reglas CSS definidas a los enlaces activos, es decir, aquellos sobre los que el usuario pulsa el ratón, antes de que lo suelte. El proceso de hacer click en un enlace consiste en pulsar el ratón sobre el mismo y luego soltarlo, momento en que se dispara el enlace y carga la página de destino. El enlace está activo desde que se pulsa el ratón y mientras se mantiente pulsado.
:visited Se aplican las reglas CSS definidas a los enlaces que ya han sido visitados por el usuario.
:hover Se aplican las reglas CSS definidas a cualquier elemento sobre el que pase el puntero del ratón.
:checked Se aplican las reglas CSS definidas aelementos de tipo botones de radio y casillas de verificación cuando están marcados.
:empty Se aplican las reglas CSS definidas a los elementos que pueden tener un contenido y no lo tienen. No se actualiza el estado de dichos elementos en tiempo real, a menos que lo hagamos mediante JavaScript o jQuery.
:focus Se aplican las reglas CSS definidas a los elementos que tienen el foco.
PSEUDO CLASES DE ATRIBUTOS
SELECTOR COMENTARIOS
:required Se refiere a los campos que tienen establecido el atributo required.
:optional Se refiere a los campos que no tienen establecido el atributo required.
:disabled Se refiere a los campos que tienen establecido el atributo disabled.
:enabled Se refiere a los campos que no tienen establecido el atributo disabled.
:read-only Se refiere a los campos que tienen establecido el atributo readonly.
:read-write Se refiere a los campos que no tienen establecido el atributo readonly.
:lang(idioma) Se refiere a los elementos que tienen establecido un idioma concreto en el atributo lang.
PSEUDO CLASES DE CONTENIDO
SELECTOR COMENTARIOS
:valid Se refiere a campos de tipo date que tienen una fecha correcta.
:invalid Se refiere a campos de tipo date que tienen una fecha incorrecta.
:in-range Se refiere a campos de tipo number que tienen un valor comprendido entre los límites establecidos por los atributos min y max.
:out-of-range Se refiere a campos de tipo number que tienen un valor que está fuera de los límites establecidos por los atributos min y max.
PSEUDO CLASES DE UBICACIÓN
SELECTOR COMENTARIOS
:first-child Selecciona el elemento referenciado que es el primero del tipo o clase especificado dentro de su contenedor padre.
:last-child Selecciona el elemento referenciado que es el último del tipo o clase especificado dentro de su contenedor padre.
:first-of-type Selecciona el elemento referenciado si es el primero del tipo o clase especificado dentro de su contenedor padre.
:last-of-type Selecciona el elemento referenciado si es el último del tipo o clase especificado dentro de su contenedor padre.
:nth-child(n) Selecciona el elemento que es el hijo n, si es del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-last-child(n) Selecciona el elemento que es el hijo n, si es  del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-of-type(n) Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-of-type(odd/even) Selecciona los elementos impares (odd) o pares (even), de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-of-type(an + b) Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b, por el principio del contenedor padre.
:nth-last-of-type(n) Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-last-of-type(odd/even) Selecciona los elementos impares (odd) o pares (even), de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-last-of-type(an + b) Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b, por el final del contenedor padre.
:only-of-type Selecciona aquellos elementos del tipo o clase referenciado que sean el único de ese tipo o clase dentro de su contenedor padre.
:only-child Selecciona aquellos elementos del tipo o clase referenciado que sean el único higo dentro de su contenedor padre.
OTRAS PSEUDO CLASES
SELECTOR COMENTARIOS
:root Se refiere al conjunto de todo el documento HTML.
:not Se refiere a elementos que NO sean del tipo referenciado.
     

Deja un comentario

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