Teoría
Teoría

La pseudoclase :only-of-type

La pseudoclase :only-of-type funciona casi igual que :only-child. La diferencia es que tiene en cuenta el tipo de elemento.

Por ejemplo:

p:only-of-type {
  ...
}

En este caso, los estilos se aplicarán a un elemento p si es el único hijo de tipo p de su padre.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :only-of-type</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="group"> <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> <ul class="cards"> <li class="king club"></li> <li class="ace spade"></li> </ul> <div class="paper"> <h1>¿Cómo se juega al solitario?</h1> <p>Como tú quieras.</p> </div> <div class="paper"> <h1>¿Cómo se gana en el póker?</h1> <p>¡Haz un farol!</p> <p>¡Haz un farol!</p> <p>¡Haz un farol!</p> </div> </div> </body> </html>

CSS

ObjetivosRealizado

A la fila de cartas que sea la única de su bloque .group, asígnale un espacio interior de 10px y un borde de 2px, de estilo dashed y color #55bb99.
Asigna el color de texto #339966 al párrafo que sea el único de su bloque .paper.