Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

El primero, el último, el único CSS

La pseudo clase :first-child

La pseudo clase :first-child se utiliza para seleccionar y dar estilo a un elemento HTML si es el primer hijo de su padre. Por ejemplo podemos tener una lista <ul> cuyos elementos <li> tienen margin:0  y un borde de 1px. Para no sobreponer bordes podemos dibujar solo los bordes derecho izquierdo e inferior de cada elemento <li>, y utilizar li:first-child para dibujar el borde superior del primer elemento.
li{
  border:1px solid;
  border-top:none;
}
li:first-child{
  border-top: 1px solid;
}

La pseudo clase :last-child

La pseudo clase :last-child se utiliza para seleccionar y dar estilo a un elemento HTML si es el último hijo de su padre. La primera cosa que me viene en mente es un ejemplo parecido al ejemplo anterior, solo que esta vez para no sobreponer bordes voy a dibujar solo los bordes derecho izquierdo e superior de cada elemento <li>, y utilizar li:last-child para dibujar el borde inferior del último elemento.
li{
   border:1px solid;
   border-bottom:none;
}
li:first-child{
   border-bottom: 1px solid;
}

La pseudo clase :only-child

La pseudo clase :only-child se utiliza para seleccionar y dar estilo a un elemento HTML que es el único hijo de su padre.
Podemos lograr lo mismo utilizando dos pseudo clases juntas, por ejemplo :first-child:last-child o :nth-child(1):nth-last-child(1), con la única diferencia que dos selectores juntos tienen una especificidad más alta.

La pseudo clase :first-of-type

La pseudo clase :first-of-type se utiliza para seleccionar y dar estilo a un elemento HTML si es el primer elemento de su typo dentro del contenedor padre.
<article>
    <h1>Un titulo</h1>
    <p>Primer párrafo.</p>
    <p>Segundo párrafo. </p>
</article>
Para seleccionar y dar estilo al primer párrafo utilizamos:
p:first-of-type{color:#555;}

La pseudo clase :last-of-type

La pseudo clase :last-of-type se utiliza para seleccionar y dar estilo a un elemento HTML si es el último elemento de su tipo dentro del contenedor padre.
En el ejemplo de arriba, para seleccionar y dar estilo al último párrafo utilizamos:
p:last-of-type{color:#333;}

La pseudo clase :only-of-type

La pseudo clase :only-of-type selecciona y da estilo a un elemento HTML si es el único elemento de su tipo dentro del contenedor padre.
Todas estas pseudo clases pueden ser concadenadas con otras pseudo clases o pseudo elementos como por ejemplo ::before y ::after.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas