Psychotik

solucionando marrones desde 2003

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

Pertenece a  Destacados, Tips  el 10 Noviembre

En esta segunda parte de pseudo-clases no tan conocidas pero útiles tocan :only-child y nth-of-type, quizá no sean las más espectaculares o de uso común, pero seguro que si trabajamos con maquetaciones un poco enrevesadas nos puedan servir de gran ayuda.

:only-child

Esta pseudo-clase es bastante sencilla pero en según que casos nos puede venir bien ya que solo afecta a hijos únicos, si trabajamos con listas o bloques en los que necesitamos que un solo item tenga otro estilo, :only-child lo pone fácil y no está de más tenerla presente para esas estructuras que compartiendo estilos necesitamos que cuando una trabaja en solitario nos muestre estilos diferentes.

Código CSS

/* Creamos los estilos de menú con lista desplegable, only-child solo se aplicará al primer nivel */
ul li:only-child{
   font-size:1em;
   color:#FF9C00;
   border-radius:1px solid #FF9C00;
}

Resultado

  • Soy el 1º de 3
  • Yo el 2º
  • ¡3º!
  • Yo soy otra lista y solo tengo un item…

Se puede utilizar con ‹li›, ‹article›, ‹a›, ‹span› y estilos tipo class “.loquesea”.

 

:nth-of-type

Esta otra pseudo-clase nos permite controlar los estilos que le aplicamos solo a un etiqueta concreta, por ejemplo a ‹div> o ‹p>, ‹article>… a diferencia de :nth-child que afecta a todos los elementos dentro del contenedor al que se lo apliquemos, :nth-of-type es excluyente y solo tiene en cuenta la posición de los items del mismo tipo, lo cual nos puede venir bien cuando trabajamos con maquetaciones complejas o bloques que intercalan código que no nos interesa tener en cuenta a la hora de aplicar estilos por posiciones o etiquetas concretas.

Código CSS

/* En el ejemplo aplicaremos un estilo que solo afecte al 2º div aunque tengamos un párrafo en medio */
div:nth-of-type(2){
   display:block;
   color:#fff;
   background:#FF9C00;
   padding:2px 5px;
}

Código HTML

‹div>Soy un “div”‹/div>
‹p>Pues yo no, soy un “párrafo”‹/p>
‹div>¡Yo sí!‹/div>
‹div>Yo también soy un “div”‹/div>

Resultado

Soy un “div”

Pues yo no, soy un “párrafo”

¡Yo sí!
Yo también soy un “div”

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.

Échale un ojo al primer post sobre Pseudo-clases


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 »