Check the new version here

Popular channels

Pseudo-elementos en CSS 3

En este capítulo abordaremos los pseudo-elementos del CSS3 y sus cambios respecto a CSS2.1.

En la versión 2.1 contábamos con 4 pseudo-elementos:

:first-line. Selecciona la primera línea.
:first-letter.Selecciona la primera letra.
:before. Nos posiciona al inicio del contenido de un elemento.
:after. Nos posiciona al final del contenido de un elemento.

La siguiente imagen muestra dónde apuntaría el selector en cada uno de los casos:


CSS3 conserva estos pseudo-elementos aunque cambia su sintaxis. Para usarlos escribiremos "::" en lugar de ":".

Código :

p::first-letter{ 
    color:red; 

p::first-line{ 
    color:blue; 

h1::after{ 
    content:"."; 

h1::before{ 
    content:"Ejemplo de "; 

    
<div id="ejemplo"> 
        <h1>pseudo-elementos</h1> 
        <p>Esto es un ejemplo usando pseudo elementos en CSS3 donde pasamos coloreamos de rojo la primera letra con first-letter, coloreamos de azul la primera línea con first-line, e incluimos en el título el texto "Ejemplo de" y "." con before y after respectivamente. 
</div>



Ver ejemplo

CSS3 añade un nuevo pseudo-elemento:

::selection. Selection referencia al texto seleccionado por el usuario.

Si usamos

Código :

p::selection{
        background-color:blue;    

}


Cuando seleccionemos el texto del párrafo, la selección tendrá color de fondo azul en vez del típico gris.

Importante: Este selector me ha dado problemas con algunas versiones de Firefox. Es aconsejable usar siempre los prefijos -webkit- y -moz- en todas vuestras pruebas.


Ver ejemplo

En el próximo capítulo veremos a fondo las pseudo-clases.
0
0
0
0
0No comments yet