/* selectores avanzados / / img + p { background: yellow; }
img ~ p { background: yellow; } / / .principal p:not(#mision){ background: orange;
/* selectores avanzados / / img + p { background: yellow; }
img ~ p { background: yellow; } / / .principal p:not(#mision){ background: orange;
¡Hola Elliscrisantovelandiacaicedo!
Si entendí bien, quieres saber cómo utilizar los selectores avanzados que se mencionaron en clase. Te explicaré un poco sobre cada uno de ellos:
El selector "img + p" selecciona el primer elemento "p" que sigue inmediatamente después de un elemento "img". Por ejemplo:
<img src="imagen1.jpg">
<p>Este párrafo es seleccionado</p>
<p>Este párrafo no es seleccionado</p>En este caso, el primer párrafo es seleccionado porque sigue inmediatamente después de la imagen.
El selector "img ~ p" selecciona todos los elementos "p" que siguen después de un elemento "img". Por ejemplo:
<img src="imagen1.jpg">
<p>Este párrafo es seleccionado</p>
<div>
<p>Este párrafo no es seleccionado</p>
</div>
<p>Este párrafo es seleccionado</p>En este caso, los dos últimos párrafos son seleccionados porque siguen después de la imagen.
Por último, el selector ".principal p:not(#mision)" selecciona todos los elementos "p" dentro del elemento con la clase "principal", excepto el elemento con el id "mision". Por ejemplo:
<div class="principal">
<p>Este párrafo es seleccionado</p>
<p id="mision">Este párrafo no es seleccionado</p>
<p>Este párrafo es seleccionado</p>
</div>En este caso, los primeros y últimos párrafos son seleccionados, pero el segundo no lo es porque tiene el id "mision".
Espero que esta explicación te haya ayudado. Si tienes alguna otra pregunta, no dudes en hacerla.
¡Espero haber ayudado y buenos estudios!