Psychotik

solucionando marrones desde 2003

Pseudo-clases que quizá no conoces… y deberías (I)

Pertenece a  Destacados, Tips  el 7 Septiembre
Pseudo-clases en CSS

Las pseudo-classes siempre nos han dado mucho juego, desde las primeras y míticas como :hover hasta otras más recientes de uso casi común :hover :nth-child o first-child, pero también existen otras que no son tan conocidas pero que esconden una utilidad muy concreta que de vez en cuando nos puedan ahorrar tiempo, algo de peso en el archivo .css y algún dolor de cabeza. En esta primera entrega :not y :empty

:not

Esta pseudo-clase básicamente es un negador, nos permite indicar a que elemento o elementos NO queremos que se le aplique un estilo, por ejemplo en un lista:

Código CSS

/* Le decimos que aplique este estilo a todos los ‹li› menos al que lleve el class .triste, en este caso se lo aplico al 4º item */
li:not(.triste){
   background:#FF9C00;
   color:#fff;
   padding:3px 5px;
   list-style:none;
}

Resultado

  • Soy un ‹li› con mucho estilo
  • ¡Yo también!
  • ¡¡Y yo!!
  • Yo no tengo estilo… soy un ‹li› triste
  • Pues yo también tengo estilo

Otra característica de la pseudo-clase :not permite encadenar negaciones, es decir que podemos negar tantos elementos como queramos, por ejemplo:

Código CSS

/* Le decimos que además de al class .triste, se lo aplique a un id colocado en el último item (lógicamente con aplicar también .triste al último elemento nos valdría, solo lo hago para que veáis como funciona con otras etiquetas xD) */
li:not(.triste):not(#mastriste){
   ···
}

Resultado

  • Soy un ‹li› con mucho estilo
  • ¡Yo también!
  • ¡¡Y yo!!
  • Yo no tengo estilo… soy un ‹li› triste
  • Dices tu de triste… ¡pues anda que yo!

:not puede aplicarse a clases, id, a (cuando funcionan como anclas), :first-of-type, [href=”url”] o propiedades para estados en elementos de formulario, tipo [disabled].

 

:empty

La pseudo-clase :empty puede sernos muy útil, puesto que nos permite jugar con los contenedores que estén vacíos de contenidos. Por ejemplo puede ser muy útil si trabajamos con CMS o programaciones que pinten elementos aunque estos no tengan contenido, lo cuál a veces puede generar bloques con estilos genéricos que nos den algún que otro dolor de cabeza para eliminarlos y dejar el diseño fino.

Código CSS

/* Damos unos estilos generales a los párrafos, al estar uno de ellos vacío de contenido, nos genera */
p{
   float:left;
   width:100%;
   margin-bottom:30px;
   color:#000;
   padding:10px;
   background:rgba(255,255,255,0.3);
}

Resultado

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam lacus, tempus euismod, dignissim a, vulputate et, urna. Integer mollis. Fusce leo. In et metus. Cras fringilla, quam in fringilla tincidunt, libero tellus aliquam tortor, eget euismod nisl mi quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut nisi. Nunc neque metus, ultrices vel, malesuada vitae, lacinia vitae, erat.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pellentesque, mi eu mattis auctor, lorem velit ultricies urna, id fermentum urna nibh ac risus.

Ahora le aplicamos :empty para trabajar solo sobre el párrafo que está vacío:

Código CSS

/* Podemos aplicarle los estilos que queramos, ocultarlo con un “display:none” si nos molesta o por ejemplo reutilizarlo como separador */
p:empty{
   height:0px;
   background:none;
   padding:0px;
   border-top:2px dashed #d8d8d8;
}

Resultado

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam lacus, tempus euismod, dignissim a, vulputate et, urna. Integer mollis. Fusce leo. In et metus. Cras fringilla, quam in fringilla tincidunt, libero tellus aliquam tortor, eget euismod nisl mi quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut nisi. Nunc neque metus, ultrices vel, malesuada vitae, lacinia vitae, erat.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pellentesque, mi eu mattis auctor, lorem velit ultricies urna, id fermentum urna nibh ac risus.

Ambas pseudo-clases funcionan perfectamente con Chrome, Firefox, Opera y a partir de la versión 9 de Internet Explorer, además de en navegadores nativos de iOS y Android.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »