Selectores de CSS Parte 3

Avanzar hacia el futuro del CSS

Usted puede pensar que es un poco pronto para estar pensando en CSS 3. Después de todo, aún no es una norma reconocida, y de hecho sólo hay unos pocos documentos en un estado público acerca de este nuevo nivel. Pero aún así, Mozilla y Firefox han comenzado los selectores CSS para que los diseñadores Web los puedan utilizar. Si usted comienza a aprender el CSS 3, estará por delante de la curva cuando otros navegadores empiecen a apoyarlos.

CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:

A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.

a[href^="ftp:"] { … }

Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.

a[href$=".a2sistemas"] { … }

Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.

Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.

img[src*="photos"] { … }

Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.

CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.

* Root pseudo-clase representa el elemento raíz del documento (en HTML 4 este es <html>). Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.

:root { … }

* El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.

p:last-child { … }

* El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.

:target { … }

* Pseudo-clase le permite seleccionar los elementos que no están representados por el argumento. Tenga cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:

img:not([alt]) { border: thick solid yellow; }

CSS 3 Combinar hermanos
Este selector le permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 usted escribiría:

h3 ~ blockquote

Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.

Otros 3 selectores CSS
Hay muchos más nuevos selectores CSS 3, pero no son compatibles con los navegadores hasta ahora. Cuando lo sean, van a agregar funcionalidad a las formas (como para poner de relieve los elementos comprobados, los elementos desactivados, y los elementos de forma que no han sido tocados por el lector), agregaran la capacidad de seleccionar los elementos en los que el único niño del padre o cuando no tienen hijos, o si desea seleccionar todas las filas de otra tabla, el selector de n-ésimo niño le permitirá alternar las filas que se seleccione.

Dejar un comentario

*