Selectores, combinadores, pseudo clases y pseudo elementos

Ejemplo 1:

Elemento con clase

Elemento no seleccionado

  // EN HTML
  // Elemento se mostrará en azul
  <p class="clase00"> Elemento con clase </p>

  // Elemento no alterado
  <p> Elemento no seleccionado </p>

  // ----

  // EN CSS
  p.clase00{ color: blue; } 
  

Ejemplo 2: seleccionando elemento según atributo y su valor.

Elemento atributo data

Elemento no seleccionado

// EN CSS
    [data-titulo="primerTitulo"]{color: blue;}

    // EN HTML
    // Solo este elemento será alterado
    <p data-titulo="primerTitulo"> Elemento atributo data </p>

    // Este no
    <p> Elemento no seleccionado </p>
    

Ejemplo 3: Seleccionando elemento según cómo inicia su VALOR de atributo:

dudu.com

dudu.com

gato-perro

perro-gato

Ejemplo 4: Seleccionando elemento según cómo FINALIZA su VALOR de atributo:

Uno

Dos

Ejemplo 5: Seleccionando elemento que contenga UN VALOR ESPECÍFICO de atributo:

Caja roja

Caja verde

No será alterado

Ejemplo 6: Seleccionando (mediane un espacio) y según descendencia

Ni este

Ejemplo 7: Seleccionando (con un espacio vacio) toda la descendencia de un mismo elemento padre. Pero omitiendo la descendencia de otro padre.

Hijo con otro padre

Ejemplo 8: Seleccionando (con signo >) toda la descendencia DIRECTA (o lo que es lo mismo decir, la PRIMERA descendencia) de un mismo elemento padre.

Mediante el selector (con signo >) solo será tomada en cuenta la primera descendencia. La segunda descendencia (o con un segundo familiar-padre) no será tomada en cuenta.

// EN HTML
// Primera descendencia, hijos directos, alterados
<div class="padre01">
<p> Hijo directo </p>
<p> Hijo directo </p>

    // Segunda descendencia, NO se altera
      <div class="padre02">
        <p> Otra descendencia </p>
        <p> Otra descendencia </p>
      </div>
  </div>

    // EN CSS
    .padre01 > p {color: violet;}    

---

Apuntando (con signo +) solo al primer elemento ubicado después de un primer elemento.

Ejemplo 9:

Primer elemento SEGUIDO PERO AFUERA de padre03

Segundo elemento SEGUIDO PERO AFUERA de padre03

Segundo párrafo fuera de padre03

---

Apuntando (con signo ~) a todos los elementos justo después de un elemento anterior

Incluso si existe un elemento en medio de los elementos apuntados, entonces esos elementos apuntados serán alterados por la regla CSS 'elemento ~ el-siguiente-elemento'.

// HTML
<p>Parrafo 1</p>
<p>Un elemento p en medio</p>

  // Pintado de rojo
  <ul class="lista00"> <li>Item A </li> </ul>

  // NO PINTADO de rojo
  <p> Este elemento no esta apuntado </p>

  // Pintado de rojo
  <ul class="lista00"> <li>Item A </li> </ul>

// CSS
/* Apunta al elemento UL después de un anterior elemento P, 
incluso aunque existan otros elementos 
en medio de esos elementos apuntados */
p ~ .lista00 { color: red;}

ATENCIÓN: En este ejemplo he debido indicar una clase exclusiva (la clase class="lista00) para el elemento <ul> de ejemplo.

¿Por qué? De no hacerlo, la regla CSS p ~ .lista00{color: red;} pintará todos los elementos <ul> de esta página o (PEOR) del resto de páginas HTML vinculadas a esta regla.

Ejemplo 10:

Parrafo 1

Un elemento p en medio

• Item A: La regla CSS 'p ~ ul' apunta a un elemento <ul>

Este elemento <p> no se pinta pues la regla CSS de abajo no esta apuntando a un elemento <p>.

• Item A: La regla CSS 'p ~ ul' apunta a un elemento <ul>

---

Pseudo clases y pseudo elementos

Lista de Pseudo clases

Son pseudo clases porque son una forma alterna de identificar elementos HTML. Es decir, se apunta a un elemento (con pseudo clase) dándole un nuevo estado (o un nuevo tipo de estado, además del que ya tiene). Por ejemplo:

• Cuando el cursor se desliza sobre ese elemento
• Cuando es el primer elemento de un conjunto de elementos
• Cuando el cursor da click (o aún no lo hace) encima de ese elemento
• Cuando es el último elemento de un conjunto de elementos
• ...entre otras condiciones según la pseudo clase

Son pseudo elementos cuando se define un elemento como parte de otro. Por ejemplo:

Lista de pseudo elementos

• El primer o el último caracter
• Un nuevo contenido es insertado dentro (ó antes, o después) de otros elementos
• Cuando se selecciona la primera línea de caracteres de un conjunto de palabras
• Cuando el cursor selecciona uno de tantos elementos
• Cuando es el último elemento de un conjunto de elementos
• ...entre otras condiciones según el pseudo elemento