Pseudo-clases y pseudo-elementos de CSS3

Mediante los Pseudo-clases y pseudo-elementos nos permiten establecer estilo para ciertos elementos que cumplen una característica en especial dentro de la estructura del documento, de tal manera que es posible aplicar CSS haciendo uso de pseudo-clases y pseudo-elementos. En esta entrada desarrollaremos con mayor detalle sobre lo que son y para qué sirven las pseudo-clases en CSS3, así que ponte cómodo y !Empezamos¡

Qué son las pseudo-clases en CSS

Las pseudoclases son selectores que básicamente nos permiten apuntar a un elemento específico que cumple una característica determinada. Una pseudoclase está compuesta por una palabra clave que se escribe empezando con dos puntos simples; por ejemplo: :first-child o :last-child

:first-child

Mediante la pseudo-clase :first-child podemos establecer un determinado estilo para el primer elemento hijo de un elemento padre.

Ejemplo de :first-child

En el siguiente ejemplo haremos que el primer elemento hijo ubicado dentro del contenedor div, sea de tipo párrafo, sea de color rojo y tamaño de 20px.

<div>
  <p>Este es un párrafo, el primer elemento hijo de un contenedor padre div </p>
  <p>Este es otro párrafo, el segundo elemento hijo de un contenedor padre div </p>
  <p>Este es otro párrafo más, el tercer elemento hijo de un contenedor padre div </p>
</div>
<style>
div {
  border: solid 1px green;
 }

div p:first-child {
  color: red;
  font-size: 20px;
}
</style>

No solo se pueden aplicar a párrafos, sino a cualquier tipo de elementos, para ello se debe especificar mediante el selector correspondiente, por ejemplo la primera lista ordenada del cuerpo de la página se indicaría de la siguiente manera: body ol:first-child.

:last-child

La pseudo-clase :last-child nos permite dar estilo al último elemento hijo de un determinado elemento padre. Básicamente nos ayuda a establecer los estilos que serán aplicados un determinado tipo de elemento, que sea el último de su tipo dentro de su elemento padre.

Ejemplo de :last-child

En el siguiente ejemplo aplicaremos un estilo de color rojo y tamaño de letra de 20px al último párrafo del contenedor <div>

<div>
  <p>Este es un párrafo, el primer elemento hijo de un contenedor padre div </p>
  <p>Este es otro párrafo, el segundo elemento hijo de un contenedor padre div </p>
  <p>Este es otro párrafo más, el tercer y último elemento hijo de un contenedor padre div </p>
</div>
<style>
div {
  border: solid 1px green;
 }

div p:last-child {
  color: red;
  font-size: 20px;
}
</style>

La pseudoclase :last-child se puede aplicar a cualquier otro elemento, por ejemplo para seleccionar la última imagen de un contenedor div, el selector seria de la siguiente manera: div img:last-child

Por qué usar pseudoclases

Una pseudocalse se usa para apuntar o seleccionar a un elemento que cumple una característica determinada, no es lo mismo que usar un identificador para dicho elemento y darle un estilo, pues un identificador está asociado al elemento, mientras una pseudoclase está asociada a una característica.

Por ejemplo, en los ejemplos anteriores, si cambiamos la estructura y el primer párrafo pasa a otra posición; otro párrafo tomará su lugar y los estilos establecidos mediante Pseudoclases se mantienen para el nuevo primer párrafo, no ocurriría lo mismo si se trabajaran con identificadores, en ese caso el elemento con identificador seguiría manteniendo su estilo definido.

Entonces, en ocasiones se quiere seleccionar elementos que cumplan con una característica determinada, es ahí donde entra en juego el poder de las Pseudoclases.

Otras pseudoclases de CSS

Además de :first-child y :last-child, pseudoclases de CSS3 existen otras que ya conocimos en lecciones de CSS, pero no está demás recordarlas; veamos.

• :only-child
• :invalid
• :hover
• :focus

Además de estas existe una larga lista más. Ahora pasemos a desarrollar los pseudoelementos.

Qué son los pseudo-elementos en CSS

Los pseudo-elementos están pensados para establecer un estilo a partes específicas de un elemento, por ejemplo: la primera línea de un texto, la primera letra de un texto, etc. veamos cuáles son y la forma de aplicarlos. Un pseudoelemento está formado por una palabra clave antecedida por dos puntos dobles; por ejemplo: ::firt-line, a continuación conozcamos los agregados en CSS3.

::first-line

El pseudoelemento ::first-line sirve para establecer un estilo a la primera línea de texto de un elemento seleccionado. La forma de aplicar es simple, debemos especificar el elemento de texto al que aplicaremos el estilo y definir el pseudoelemento ::first-line; mejor veamos un ejemplo.

Ejemplos de ::first-line

Ejemplo 1.- Se trata de un párrafo, mediante la pseudoclase ::first-line haremos que la primera línea de texto tenga un estilo determinado, veamos.

<style>
 p::first-line {
    font-size: 30px;
    font-weight: bold;
    color: green;
    font-style: italic;
} 
</style>

<p>Este es un parrafo donde conoceremos cómo funciona el pseudoelemento ::first-line, para ello haremos que este párrafo se un poco extendido, de tal manera que podamos observar cómo si aplicamos el Pseudoelemento ::first-line a este elemento de parrafo, podemos conseguir que la primera linea sea de color verde, tamaño de 30px, en negrita y cursiva. Para ver el resultado solo ejecuta este código mediante el icono de reproduccion. Veamos. </p>
   

Ejemplo 2.- Ahora se trata de dos párrafos ubicados dentro de un contenedor <div> y otro párrafo fuera del contenedor, mediante el pseudoelemento ::first-line haremos que las primeras líneas de texto de los elementos párrafos <p> ubicados dentro del contenedor <div>, tengan un estilo determinado. Mientras que la que esta afuera, no será afectada.

<style>
div p::first-line {
    font-size: 30px;
    font-weight: bold;
    color: orange;
} 
</style>
   
<div>
    <p>Este es el primer párrafo ubicado dentro de un contenedor DIV, nos servirá para ver cómo funciona y cómo se aplica el pseudoelemento ::first-line a los párrafos que se encuentran dentro del contenedor, además extenderemos este texto intencionalmente para ver el resultado de la primera linea, al aplicar el correspondiente estilo, ya que de eso se trata.</p>
  
    <p>Este es el segundo párrafo ubicado dentro del contenedor DIV, nos ayudará a entender cómo funciona el pseudoelemento ::first-line, cuando se aplica a los elementos de texto, en este caso párrafos que están ubicados dentro de un contenedor, ademas nos ayudará a entender como se apuntan a dichos elementos. Ejecuta este código para ver el resultado...</p>
 
</div>
<p> Este es un párrafo ubicado fuera del contenedor DIV, no será afecado por el pseudoelemento, pues hemos establecido la regla CSS para aquellos párrafos que está, dentro del contenedor DIV. Para ver el resultado solo debbes ejecutar este código dando clic sobre el ícono de reproducción.</p>

::first-letter

El pseudoelemento ::first-letter permite establecer un estilo para la primera letra del texto de u elemento de texto, por ejemplo, pueden ser: primeras letras de párrafos, títulos, subtítulos, etc. La forma de aplicar es bastante sencilla, simplemente debemos especificar el elemento de texto al que queremos aplicar y seguirle del pseudoelemento ::first-letter. A continuación veamos un ejemplo.

Ejemplo de ::first-letter

<style>
 p::first-letter {
    font-size: 70px;
    font-weight: bold;
    color: green;
    font-style: italic;
} 
</style>
<p>Este es un elemento de párrafo, en la que aplicaremos el pseudoelemento ::first-letter, que sirve para poner un estilo a la primera letra de un elemento de texto, en este caso de este párrafo. Veamos.</p>
   

::selection

El pseudoelemento ::selection nos permite dar estilo a un elemento seleccionado por el usuario. Para que entiendas te lo explico más fácil, cuando un usuario selecciona por ejemplo un fragmento de texto en una página web, el texto seleccionado suele tener un estilo definido, color de texto y fondo cambian de tal manera que el texto seleccionado puede ser diferenciado del resto. Dicho estilo puede ser establecido mediante el pseudoelemento ::selection como veremos a continuación en el ejemplo.

Ejemplo de ::selection

<style>
  p::selection {
    color: orange;
    background: #047a0c;
  }
  p {font-size:30px;}
</style>
   
<p>Este es un párrafo al que aplicaremos el pseudoelemento ::selection para ver cómo funciona, para comprobar debemos selecciinar el texto en el resultado y debería aplicarse el estilo establecido en la regla CSS.</p>

La propiedad content

La propiedad content nos permite establecer el contenido que queremos insertar antes o después de un elemento mediante código CSS; para ello usamos los pseudoelementos ::before o ::after. Es necesario mencionar esto, pues a continuación aprenderemos a usar dichos pseudoelementos.

Valores para la propiedad contend

La propiedad contend admite varios valores, desde simples cadenas de texto, enlaces, etc. Veamos las que nos interesan.

• string: básicamente se trata de un texto entre comillas dobles
• url: permite establecer una dirección URL

::before

El pseudoelemento ::before permite agregar o insertar un contenido antes de un elemento mediante CSS; para ello simplemente debemos establecer el elemento (mediante el selector) al que queremos anteceder contenido, luego mediante la propiedad contend estableceremos el contenido que deseamos insertar. Mejor veamos algunos ejemplos.

Ejemplo 1.- Solo a modo de ejemplo aplicaremos ::before para insertar un pedazo de texto antes de un párrafo. No es práctico utilizar ::before para insertar cadenas de texto mediante CSS.

<style>

.ejem::before {
    content: "➥ Un pedazo de texto:";
    color: red;
    font-size:20px;
} 
</style>
<p class="ejem">Párrafo de ejemplo.</p>

Ejemplo 2.- En el siguiente ejemplo insertamos una imagen antes de un los párrafos que estén identificados con el identificador class="text", para ello indicaremos dichos párrafos mediante su respectivo selector y mediante el pseudoelemento ::before estableceremos el contenido que le antecederá, en este caso la propiedad contend contendrá la URL donde se encuentra dicha imagen, en caso de estar alojado en la misma carpeta que el documento, se puede especificar directamente el nombre de la imagen con su respectiva extensión, por ejemplo url("imagen.jpg"), sin embargo en nuestro caso emplearemos la dirección URL. Veamos.

<style>
.text::before { 
  content: url("https://desarrolladoresweb.org/wp-content/uploads/pruebas.png");
  }   
   
</style>
   
<p class="text">Este es el primer párrafo con in identificador class="text". Mediante CSS insertaremos una imagen antes de este párrafo. Ya sabemos, para ello usaremos el pseudoelemento ::before y mediante la propoedad contend especificaremso cuál es dicha imagen. Haremso que este texto sea extenso a propósito para que veas cómo se antepone la imagen, luego usaremos un párrafo corto para que notes la diferencia. Veamos.</p>
<p class="text">Este es otro párrafo corto con indentificador class="teext", por ende será también afectado.</p>
<p>Este es un párrafo sin identificador, por o cual no será afectado pues no hemos declarado ningún estilo para este.</p>

Ejemplo 3.- El siguiente ejemplo se trata de una lista en la que mediante CSS haremos que el icono que antecede por defecto a las listas HTML desaparezca mediante (list-style: none;) y en su lugar insertaremos un icono personalizado mediante el pseudoelemento ::before y la propiedad contend, se trata de un emoticón de manzana; veamos.

<style>
  
ul { 
  list-style: none; 
  font-size:40px;
  }  
  
li::before { content: "🍎"; }
  
</style>
   
<ul>
  <li>Verde</li>
  <li>Amarillo</li>
  <li>Rojo</li>
  <li>Morado</li>
  <li>Naranja</li>
  <li>Blanco</li>
</ul>

Ejemplo 4.- En el siguiente ejemplo de ::before insertamos un bloque de 100px de ancho y 50px de altura, antes de un párrafo, para conseguir el efecto el valor de la propiedad contend quedará vacía, mediante CSS estableceremos que dicho contenido sea tipo bloque (display: block;), con ancho de 100px y altura de 50px, color de fondo azul, veamos.

<style>
.caja::before {
    content: "";
    display: inline;
    width: 100px;
    height: 50px;
    background-color: blue;
} 
</style>
   <p class="caja">Párrafo de ejemplo para insertar un bloque de 50x100px antes de este, mediante el pseudoelemento ::before.</p>

::after

El pseudoelemento ::after sirve para insertar o agregar contenido después de un elemento HTML especificado en CSS mediante el selector correspondiente, la forma de hacerla básicamente consiste en indicar el elemento al que queremos agregar contenido después, luego aplicar el pseudoelemento ::after y finalmente establecer el contenido a insertar mediante la propiedad contend y su respectivo valor.

El pseudoelemento ::after básicamente funciona similar al pseudoeleemnto ::before (contenido se inserta antes), pero en el caso de ::after el contenido se inserta después.

Ejemplo de ::after

Todos los ejemplos aplicados al pseudoelemento ::before, se pueden aplicar a ::after, simplemente cambiando before por after, por ende ya puedes probar con todos los ejemplos que anteriormente conocimos. Por ejemplo tomemos el ejemplo de la lista con pseudoelemento en modo after.

<style>
  
ul { font-size:40px;}  
  
li::after { content: "🍎"; }
  
</style>
   
<ul>
  <li>Verde</li>
  <li>Amarillo</li>
  <li>Rojo</li>
  <li>Morado</li>
  <li>Naranja</li>
  <li>Blanco</li>
</ul>   

[popup_anything id=»5821″]