Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 60

Hay otros selectores que se agregaron o se consideraron parte de CSS3 y que son de utilidad a la hora de crear un diseño web. Estos selectores usan los símbolos >, + y ~ para especificar una relación entre los elementos.

Código 2-26:

Uso del selector >.

El selector > indica que el elemento afectado es el segundo elemento si éste está anidado en el primero. La regla del Código 2-26 modifica los elementos <p> si son hijos de un elemento <div>. En este caso, la regla es más específica y está referida solo al elemento <p> de la clase mitexto2.

El selector siguiente se construye con el símbolo +, que hace referencia al segundo elemento cuando éste está precedido inmediatamente por el primer elemento. Ambos elementos deben compartir el mismo elemento padre.

Código 2-27

Uso del selector +.

La regla del Código 2-27 afecta a los elementos <p> que se encuentren después de otro elemento <p> identificado con la clase mitexto2. Si abre en el explorador el archivo HTML con el Código 2-18, el texto del tercer elemento <p> se mostrará de color rojo porque este elemento <p> en particular está inmediatamente después del elemento <p> identificado con la clase mitexto2.

El último selector se construye con el símbolo ~. Este selector es similar al anterior, pero el elemento afectado no tiene que ser inmediatamente anterior al primer elemento. Además, puede haber más de un elemento.

Código 2-28

Uso del selector ~.

La regla en el Código 2-28 afecta al tercer y cuarto elemento <p> de nuestro ejemplo. El estilo se aplica a todos los elementos <p> que son hermanos y se encuentran después del elemento <p> identificado con la clase mitexto2, no importa si otros elementos están en medio.

Puede experimentar en el documento HTML que contiene el Código 2-18 mediante la inserción de un elemento <span> </span> después del elemento <p> con la clase mitexto2 para verificar que solo los elementos <p> son modificados por esta regla.