La especificación de selectores CSS 3 es ya totalmente soportada por los navegadores actuales.

Algo muy interesante de CSS 3, son sus selectores, que como su nombre indica, permite seleccionar un elemento web para darle estilo o estructura. ¿Cuales son?

Principales selectores CSS 3

Notación:

  • Ele – Elemento – Cualquier elemento web. Ejemplos: div, span, a, li, p, strong, etc.
  • atr – Atributo – Describe las características de un elemento web. Ejemplos: href, alt, class, rel, etc.
  • val – Valor – Magnitud de un atributo. Ejemplo: en rel=’nofollow’; rel es el atributo y nofollow el valor.
  • n – Cualquier número entero.

Selectores y ejemplos prácticos:

Sintaxis

Descripción

Ele[atr^='val']Selecciona todos los elementos que inicien con un valor especificado.

Ejemplo: a[href='https://blogandweb.com/'] Seleccionará todos los links hacia blogandweb.com

Ele[atr$='val']Selecciona todos los elementos que terminen con un valor especificado.

Ejemplo: a[href$='.zip'] Seleccionará todos los links de archivos zip.

Ele[atr*='val']Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado.

Ejemplo: a[href*='tag'] Seleccionará todos los links que contengan la palabra “tag”.

Ele:nth-child(n)Selecciona el enésimo hijo de su elemento padre. Ejemplo: p a:nth-child(2) seleccionará el segundo enlace de un párrafo.
Ele:nth-last-child(n)Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero.

Ejemplo: p a:nth-last-child(2) seleccionará el penúltimo enlace de un párrafo.

Ele:nth-of-type(n)Selecciona el enésimo elemento de su tipo.

Ejemplo: p img:nth-of-type(1) seleccionará la primer imagen en un párrafo.

Ele:nth-last-of-type(n)Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero.

Ejemplo: p img:nth-last-of-type(1) seleccionará la última imagen en un párrafo.

Ele:last-childSelecciona el último hijo de un elemento.

Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase “post”.

Ele:first-of-typeSelecciona el primer elemento de su tipo en el elemento padre.

Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase “post”.

Ele:last-of-typeSelecciona el último elemento de su tipo en el elemento padre.

Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase “post”.

Ele:only-childSelecciona el único elemento hijo de un elemento padre.

Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento.

Ele:only-of-typeSelecciona el único elemento de cierto tipo.

Ejemplo: .post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen.

Ele:emptySelecciona los elementos web que no tienen elementos hijos.

Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos.

Ele:targetSelecciona los elementos que tienen como destino una URL .
Ele:enabledSelecciona elementos (de formularios) con valor enabled (habilitado).

Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados.

Ele:disabledSelecciona elementos (de formularios) con valor disabled (deshabilitado).

Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados.

Ele:checkedSelecciona elementos (de formularios) con valor checked (seleccionado).

Ejemplo: input:checked seleccionará los campos que estén seleccionados.

Ele::selectionSelecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.

Ejemplo:  ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor.

Ele: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”.

::first-lineSelecciona la primera línea de un elemento web.

Ejemplo:  p::first-line seleccionará la primera línea de un párrafo.

::first-letterSelecciona la primera letra de un elemento web.

Ejemplo:  p::first-letter seleccionará la primera letra de un párrafo.

::beforeSe 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.

::afterSe 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.

Conclusión

Los selectores de CSS 3 se presentan como una interesante herramienta: ahorran en parte el uso de lenguajes de programación, pueden hacer más optimo el código CSS y más especifica la selección de elementos.