Combinación de selectores en CSS
Ya hemos visto los selectores básicos junto a sus pseudoelementos. Vamos a poder utilizar diferentes combinación de elementos para obtener diferentes funcionalidades:
elemento,elemento: aplicamos misma hojas de estilo a varios elementos.
elemento elemento: selección de elementos descendientes.
elemento > elemento: selección de elementos hijos.
elemento + elemento: selección de elementos hermanos.
Clases de un elemento. elemento.clase
Vamos a poder aplicar una clase a cualquier elemento. Para ello pondremo el símbolo . (punto) después del elemento y con una clase.
Ejemplo:
<head>
<style>
p.verde
{
background-color:green;
}
</style>
</head>
<body>
<div>
<h1 class="verde">La cabecera NO es verde
<p class="verde">La clase solo se aplica solo a los párrafos
</div>
</body>
Pruébalo
Varios elementos: elemento , elemento.
Vamos a poder aplicar una misma hoja de estilos a elementos diferentes simplemente separando los elementos con el símbolo , (coma).
Ejemplo:
<head>
<style>
p,a
{
background-color:green;
}
</style>
</head>
<body>
<p>Los párrafos y los enlaces van a ser de color de fondo verde
</p>
<div>
Este es un texto con un
<a href="enlace1.html"> Enlace </a>
</div>
</body>
Pruébalo
Elementos descendientes: elemento elemento.
Se representa con el símbolo espacio ( ) entre dos elementos. Si tenemos dos elementos separados por un espacio, se aplicará la hoja de estilos a los elementos que estén dentro (o en cualquier nivel jerárquicamente inferior) al primer elemento.
Ejemplo:
<head>
<style>
div p
{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>Este párrafo tiene fondo verde ya que se encuentra dentro de un div
<p>Este párrafo tiene fondo verde ya que se encuentra dentro de un div
</div>
<p>Este párrafo NO es verde ya que se encuentra dentro de un div
</body>
Pruébalo
Elementos hijos: elemento > elemento.
Se representa con el símbolo mayor (>) entre dos elementos. Si tenemos dos elementos separados por un espacio, se aplicará la hoja de estilos a los elementos que estén justo dentro (o en el primer nivel jerárquicamente inferior) al primer elemento.
Ejemplo:
<head>
<style>
div > a
{
background-color:green;
}
</style>
</head>
<body>
<div>
<a href="enlace1.html">Este enlace tiene fondo verde ya que se encuentra justo un nivel por debajo de un div
<p>Este enlace no se encuentra en el nievel interior al div y por eso no tiene fondo verde
<a href="enlace1.html">Este enlace tiene fondo verde ya que se encuentra justo un nivel por debajo de un div
</div>
</body>
Pruébalo
Elementos hermanos: elemento + elemento.
Se representa con el símbolo suma (+) entre dos elementos. Si tenemos dos elementos contiguos en el mismo nivel jerárquico se asigna la hoja de estilos al segundo elemento.
Ejemplo:
<head>
<style>
p + p
{
background-color:yellow;
}
a + a + a
{
color: green;
}
</style>
</head>
<body>
<p>Párrafo normal.
<a href="enlace1.html"> Enlace normal
<a href="enlace1.html"> Enlace normal
<a href="enlace1.html"> Enlace verde. Ya que tiene dos enlaces hermanos
</p>
<p>Párrafo amarillo. Ya que es un árrafo que tiene un pPárrafo anterior
<p>Párrafo amarillo. Ya que es un árrafo que tiene un pPárrafo anterior
</body>
</html>
Pruébalo