Teoría
Teoría

La pseudoclase :empty

La pseudoclase :empty selecciona solo las etiquetas que no tienen hijos, ni siquiera nodos de texto. Ten en cuenta que hasta un salto de línea cuenta como un nodo de texto al diseñar la estructura de la página.

Por ejemplo:

ul:empty {
  ...
}

En este caso se seleccionarán todos los elementos ul vacíos.

Para definir las dimensiones de un elemento en CSS, usa width para el ancho y height para la altura. Puedes expresar sus valores en píxeles, con la unidad px.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :empty</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="cards"></ul> <ul class="cards"> <li class="queen heart"></li> </ul> <ul class="cards"> <li class="king club"></li> <li class="ace spade"><span>A</span></li> <li class="jack heart"></li> </ul> <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"><span>Q</span></li> </ul> </body> </html>

CSS

ObjetivosRealizado

Destaca la fila que no tiene ninguna carta: asígnale una altura de 70px y un borde de 2px, de estilo dashed y color #55bb99.
Aumenta el tamaño de todas las cartas que no estén vacías: un ancho de 60px y una altura de 90px.
Asigna display: block a los span de esas cartas no vacías.