Teoría
Teoría

La pseudoclase :only-child

La pseudoclase :only-child resulta útil cuando necesitas dar estilos propios a un elemento que es el único hijo de su contenedor padre.

Por ejemplo:

li:only-child {
  ...
}

Se aplicará cuando ese <li> sea el único elemento de la lista.

El selector :only-child selecciona los mismos elementos que :last-child:first-child.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :only-child</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="group"> <ul class="cards"> <li class="queen heart"></li> </ul> <ul class="cards"> <li class="king club"></li> <li class="ace spade"></li> <li class="jack heart"></li> </ul> </div> <div class="group"> <ul class="cards"> <li class="ace spade"></li> <li class="jack heart"></li> <li class="ace spade"></li> <li class="ace heart"></li> <li class="queen diamond"></li> </ul> </div> </body> </html>

CSS

ObjetivosRealizado

Asigna un ancho de 60px y una altura de 90px a la carta que sea la única de su fila.
A la fila de cartas que sea el único elemento hijo de su bloque .group, asígnale un espacio interior de 10px y un borde de 2px, de estilo dashed y color #55bb99.