Tipos de selectores que entran en examen

1. Clase (class=””)

   Selecciona todos los elementos que hayan sido asignados (en el html) con la misma clase.

   Ejemplo de su uso al usar ".ejemplo1" dentro de la etiqueta "style":

   <p class="ejemplo1"> este texto está seleccionado </p>
   <p> este texto no está eleccionado </p>
   <p class="ejemplo1"> este texto está seleccionado </p>
   <p> este texto no está eleccionado </p>

2. Identificador (id=””)

   Es un selector único, selecciona el elemento al que le haya sido asignado (en el html) dicho id.

   Ejemplo de su uso al usar "#ejemplo2" dentro de la etiqueta "style":

   <p> este texto no está eleccionado </p>
   <p id="ejemplo2"> este texto está seleccionado </p>
   <p> este texto no está eleccionado </p>

3. Todos los elementos (*)

   Selecciona todos los elementos del archivo, permitiendo así cambiar el formato general de este.

   Ejemplo de su uso al usar "*" dentro de la etiqueta "style":

   <h1> este texto está seleccionado </h1>
   <p> este texto está seleccionado </p>
   <p> este texto está eleccionado </p>

4. Varios elementos ( p, em, h1, h2)

   Selecciona todos los elementos que pertenezcan a alguna de estas etiquetas, las comas tienen una función "o".

   Ejemplo de su uso al usar "h2, p" dentro de la etiqueta "style":

   <h1> este texto no está seleccionado </h1>
   <h2> este texto está seleccionado </h2>
   <h3> este texto no está seleccionado </h3>
   <p> este texto está eleccionado </p>

5. Elementos contenidos en otros elementos (ol li)

   Selecciona todos los elementos que pertenezcan a su vez al elemento anterior, el espacio (al no haber comas) tiene una función "y".

   Ejemplo de su uso al usar "p strong" dentro de la etiqueta "style":

   <h1> no <strong>está</strong> seleccionada ninguna palabra </h1>
   <p> solo está <strong>seleccionada</strong> la palabra en negrita </p>
   <h3> no está seleccionada <strong>ninguna</strong> palabra </h3>
   <p> solo está seleccionada la palabra en <strong>negrita</strong> </p>

6. Sobrevuleo (p:hover)

   Se coloca únicamente dentro de la etiqueta style, sobre otras etiquetas o selectores. Sirve para darle un estilo a los elementos seleccionados que solo se aplica cuando pasamos el ratón por encima de ellos.

   Ejemplo de su uso al usar "em: hover" dentro de la etiqueta "style":

   <h1> <em>solo</em> está seleccionada la palabra en cursiva </h1>
   <h2> solo está <em>seleccionada</em> la palabra en cursiva </h2>
   <h3> solo está seleccionada la <em>palabra</em> en cursiva </h3>
   <p> solo está seleccionada la palabra en <em>cursiva</em> </p>