- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Selectores de atributos y pseudoelementos</title>
<meta charset="utf-8">
<link rel="stylesheet" href="course.css">
<link rel="stylesheet" href="cat-boxes.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="page-header">Selectores de atributos y pseudoelementos</header>
<main>
<div class="boxes">
<div class="cat-in-box" title="Papá de Cupcake">
<img src="cat_fat.png">
<p>Papá de Cupcake</p>
</div>
<div class="cat-in-box" title="No Amigo Negrito">
<img src="cat_acrobat.png">
<p>No Amigo Negrito</p>
</div>
<div class="cat-in-box" title="Amigo Rodolfo">
<img src="cat_clean.png">
<p>Amigo Rodolfo</p>
</div>
<div class="cat-in-box" title="Gato triste">
<img src="cat_grumpy.png">
<p>Gato triste</p>
</div>
<div class="cat-in-box" title="Mamá de Cupcake">
<img src="cat_lady.png">
<p>Mamá de Cupcake</p>
</div>
<div class="cat-in-box" title="Félix, hermano de Cupcake">
<img src="cat_pirate.png">
<p>Félix, hermano de Cupcake</p>
</div>
<div class="cat-in-box" title="Amigo Copito">
<img src="cat_rascal.png">
<p>Amigo Copito</p>
</div>
<div class="cat-in-box" title="Massimo, hermano de Cupcake">
<img src="cat_sing.png">
<p>Massimo, hermano de Cupcake</p>
</div>
<div class="cat-in-box" title="Amigo Simón">
<img src="cat_upsidedown.png">
<p>Amigo Simón</p>
</div>
<div class="cat-in-box" title="Vecino">
<img src="cat_tied.png">
<p>Vecino</p>
</div>
<div class="cat-in-box" title="Cupcake">
<img src="cat_walk.png">
<p>Cupcake</p>
</div>
</div>
</main>
<footer class="page-footer"></footer>
</body>
</html>
CSS
.cat-in-box::before {
display: block;
}
.cat-in-box[title="Escribe el nombre del gato"]::before {
display: none;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Completa las metas en orden.
- Primero veamos quién está en cada caja. Abre todas las cajas.
- Cierra las cajas.
- Encuentra a Cupcake. En su atributo
titleaparece el nombreCupcake.