Combinaciones complejas de selectores descendentes y clases en CSS
Supongamos que ahora tenemos el siguiente código:
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Encontremos todos los elementos con clase header,
que se encuentran dentro de un elemento con clase block,
y establezcamos la fuente Arial para ellos:
.block .header {
font-family: Arial;
}
Como se puede ver en el código HTML, dentro del elemento con
clase block los elementos con clase header
pueden ser tanto encabezados h2 como
encabezados h3. Escribamos selectores
que distingan estos encabezados, y hagamos algo
con estos encabezados.
Seleccionemos todos los h2 con clase header,
que se encuentran dentro de un elemento con clase block:
.block h2.header {
font-size: 30px;
color: red;
}
Y ahora seleccionemos todos los h3 con clase
header, que se encuentran dentro de un elemento
con clase block:
.block h3.header {
font-size: 20px;
color: green;
}
Juntemos todo nuestro CSS:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Apliquémoslo a nuestro código HTML:
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee .bbb {
color: red;
}
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee h2 {
color: red;
}
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee h2.bbb {
color: red;
}
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee h3.bbb {
color: red;
}
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee p.bbb {
color: red;
}
Explica qué selecciona el selector en el código proporcionado a continuación. Luego escribe el código HTML que se ajuste a este selector. Aquí está el código con el selector:
.eee .bbb .kkk {
color: red;
}
