SELECTORES CSS3

SELECTORES

BÁSICOS

SINTAXIS	DESCRIPCIÓN
elemento[atributo^='valor']	Selecciona todos los elementos que inicien con un valor especificado.
elemento[atributo$='valor']	Selecciona todos los elementos que terminen con un valor especificado.
elemento[atributo*='valor']	Selecciona todos los elementos que contenga un valor especificado.

ESTRUCTURALES

Permiten seleccionar elementos basándose en información extra del árbol del documento. Es decir, además de las clases e id podemos seleccionar elementos basándonos en su posición en el documento.

SINTAXIS	DESCRIPCIÓN
elemento:root	Selecciona la raíz del documento.
elemento:nth-child(n)	Selecciona elementos que son el n-ésimo hijo de sus padres
elemento:nth-last-child(n)	Selecciona elementos que son el n-ésimo hijo de sus padres, empezando a contar por el final.
elemento:nth-of-type(n)	Selecciona elementos que son el n-ésimo hermano de un tipo. Ejemplo: div img:nth-of-type(2) seleccionará la segunda imagen en un div.
elemento:nth-last-of-type(n):	Igual que el anterior, pero contando desde el final.
elemento:last-child	Selecciona el último hijo de un elemento.
elemento:first-of-type	Selecciona el primer elemento de su tipo en el elemento padre.
elemento:last-of-type	Selecciona el último elemento de su tipo en el elemento padre.
elemento:only-of-type	Selecciona el único elemento de cierto tipo.
elemento:only-child	Selecciona el único elemento hijo de un elemento padre.
elemento:empty	Selecciona los elementos web que no tienen elementos hijos.

POR ESTADO DEL ELEMENTO

Estos seleccionan elementos dependiendo del estado de este:

SINTAXIS	DESCRIPCIÓN
:enabled / :disabled	Selecciona elementos que están activados/desactivados.
:checked	selecciona elementos marcados
:indetermined	Selecciona elementos cuyo estado no está determinado.

ELEMENTOS DESCLASIFICADO

SINTAXIS	DESCRIPCIÓN
elemento:target	Selecciona los elementos que tienen como destino una URL
elemento:not(s)	Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web. Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post".
elemento::selection	Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.
elemento::first-line	Selecciona la primera línea de un elemento web.
elemento::first-letter	Selecciona la primera letra de un elemento web
elemento::before	Se ubica en la parte anterior de un elemento web (típicamente para agregar contenido). Ejemplo: p::before {content: 'Nota: '} Agregará el texto "Nota :" antes de cada párrafo.
elemento::after	Se ubica en la parte posterior de un elemento web (típicamente para agregar contenido). Ejemplo: cite::before {content: 'Fin de la cita'} Agregará el texto "Fin de la cita" al final de cada elemento cite.