Combinación de selectores en CSS3
Por Aitor López de Aberasturi el Lunes, 01 de Septiembre de 2014 0 Comentarios
A la combinación de selectores añadimos un nuevo selector más:
elemento,elemento: aplicamos misma hojas de estilo a varios elementos. CSS1
elemento elemento: selección de elementos descendientes. CSS1
elemento > elemento: selección de elementos hijos. CSS2
elemento + elemento: selección de elementos hermanos. CSS2
elemento ~ elemento: Selección general de elementos hermanos. La diferencia con el selector de elementos hermanos (+) es que el segundo elemento no tiene necesariamente que estar justo detrás del primero. Aplicamos la hoja de estilos a todos los elementos 2 que tengan un elemento 1 anteirmente al mismo nivel. CSS3.
<!DOCTYPE html>
<html>
<head>
<style>
h1 ~ p { background-color: green; color:white; }
</style>
</head>
<body>
<h1> Los párrafos 1 y 3 tienen fondo verde </h1>
<p> Párrafo 1 </p>
<div>
<p> Párrafo 2 </p>
</div>
<p> Párrafo 3 </p>
</body>
</html>
Mientras que:
<!DOCTYPE html>
<html>
<head>
<style>
h1 + p { background-color: green; color:white; }
</style>
<body>
<h1> Los párrafo 1 tiene fondo verde </h1>
<p> Párrafo 1 </p>
<div>
<p> Párrafo 2 </p>
</div>
<p> Párrafo 3 </p>
</body>
</html>