Selectores Avanzados, Seudo Elementos

Cuando deseamos referirnos a una parte de un elemento, podemos aislar esa porción mediante el uso de un selector del tipo seudo elemento. La sintaxis usada para referirnos a un seudo elemento es:

elemento::seudo elemento

Algunos ejemplos de uso son los siguientes:

Para seleccionar la primera letra de un elemento podemos utilizar

::first-letter {……}

p::first-letter { font-size:30; color:red;}

Coloca la primera letra del elemento párrafo con tamaño de fuente 30 pixeles y de color rojo.

En la siguiente figura se muestra el fragmento de una hoja de estilo, donde se esta utilizando un selector de seudo elemento para colocar la primera letra de los elementos párrafo con tamaño de fuente grande (50 pixeles) y de color rojo.

seudoelemento-2

En la salida del navegador podemos ver como todos los párrafos tienen el estilo descrito en la hoja de estilo seudo2.css.

seudoelemento-3

Para seleccionar la primera línea de un elemento podemos utilizar

::first-line {……}

p::first-line { font-size:30; color:red;}

En la siguiente figura se muestra el uso del seudo elemento first-line, para dar a la primera línea de los elementos párrafo un tamaño de 50 pixeles y color rojo.

seudoelemento-4

Esto produce la siguiente salida en el navegador, donde la primera línea de cada párrafo tiene color rojo y tamaño de fuente 50 pixeles.seudoelemento-5

Para insertar un contenido antes o después  de un elemento podemos utilizar

::after

::before

li::after { content: “+”}

para añadir un signo de suma luego de cada elemento de una lista.

Esa línea de código produce la siguiente salida:

seudoelemento-6

un signo (+) después de cada elemento li.

 

Referencias Bibliográficas

http://www.w3schools.com/cssref/css_selectors.asp

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s