9. Selectores de CSS

Versión para imprimir.

En esta lección se presentan algunos selectores de CSS.

A. El selector *

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Selector *</title>
 <style>
  * {
   /* Texto centrado. */
   text-align: center;
  }
 </style>
</head>
<body>
 <h1>Selector *</h1>
 <p>Hola.</p>
</body>
</html>

B. El selector #identificador

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector #identificador
 </title>
 <style>
  /* Seleciona el elemento con
   *  id="neg" */
  #neg {
   /* negritas */
   font-weight: bold;
  }

  /* Seleciona el elemento de tipo
   *  p
   * con
   *  id="otro" */
  p#otro {
   /* mayúsculas */
   text-transform: uppercase;
  }

  /* Seleciona el elemento de tipo
   *  h1
   * con
   *  id="chas".
   * No se aplica porque el único
   * elemento con
   *   id="chas"
   * es de tipo
   *    p */
  h1#chas {
   color: green;
  }
 </style>
</head>
<body>
 <h1>Selector #identificador</h1>
 <p>Uno.</p>
 <p id="chas">Dos.</p>
 <p>Tres.</p>
 <p id="otro">Cuatro.</p>
</body>
</html>

C. El selector .clase

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Selector .clase</title>
 <style>
  /* Seleciona los elementos cuyo
   * atributo
   *  class
   * contenga el identificador
   *  azu */
  .azu {
   color: blue;
  }

  /* Seleciona los elementos cuyo
   * atributo
   *  class
   * contenga los identificadores
   *  ama y azu */
  .ama.azu {
   /* letra itálica */
   font-style: oblique;
  }

  /* Seleciona los elementos tipo
   *  p
   * cuyo atributo
   *  class
   * contenga el identificador
   *  ama */
  p.ama {
   background-color: yellow;
  }

  /* Seleciona los elementos tipo
   *  p
   * cuyo atributo
   *  class
   * contenga los identificadores
   *  ama y ver */
  p.ama.ver {
   /* Alínea el texto al final de
    * la línea. */
   text-align: end;
  }
 </style>
</head>
<body>
 <h1 class="ama azu">
  Selector .clase
 </h1>
 <p class="ver azu ama">
  Uno.
 </p>
 <p class="azu">Dos.</p>
 <p>Tres.</p>
 <p class="ama">Cuatro.</p>
 <p class="ama ver">Cinco.</p>
 <footer class="azu">
  <p>
   © 2021
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>
</html>

D. El selector sel1 > sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector sel1 &gt; sel2
 </title>
 <style>
  /* Selecciona todos los
   *  em
   * que sean hijos directos de
   *  p */
  p>em {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>
  Selector
  <em>sel1</em>
  <strong>&gt;</strong>
  <em>sel2</em>
 </h1>
 <p>
  <strong>
   Énfasis fuerte.
  </strong>
  <em>Énfasis.</em>
  Más texto.
  <span>
   <em>Otro énfasis.</em>
   <strong>
    Otro énfasis fuerte.
   </strong>
   <span>
    <em>Hola.</em>
    <strong>Adios.</strong>
   </span>
  </span>
 </p>
 <footer>
  <p>
   <em>© 2021</em>
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>
</html>

E. El selector sel1 sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector sel1 sel2
 </title>
 <style>
  /* Selecciona todos los
   *  em
   * que sean descendientes en
   * cualquier nivel de anidamiento
   * de
   *  p */
  p em {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>
  Selector
  <em>sel1</em>
  <em>sel2</em>
 </h1>
 <p>
  <strong>
   Énfasis fuerte.
  </strong>
  <em>Énfasis.</em>
  Más texto.
  <span>
   <em>Otro énfasis.</em>
   <strong>
    Otro énfasis fuerte.
   </strong>
   <span>
    <em>Hola.</em>
    <strong>Adios.</strong>
   </span>
  </span>
 </p>
 <footer>
  <p>
   <em>© 2021</em>
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>
</html>

F. El selector sel1 + sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector sel1 + sel2
 </title>
 <style>
  /* Selecciona todos los
   *  strong
   * inmediatamente después de
   *  em */
  em+strong {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>
  Selector
  <em>sel1</em>
  <strong>+</strong>
  <em>sel2</em>
 </h1>
 <p>
  <em>Este</em>
  <strong>ejercicio</strong>
  está
  <em>muy</em>
  divertido
  <strong>ggg</strong>
  <em>jajaja</em>
  <!-- subíndice -->
  <sub>jejeje</sub>
  <strong>jijiji</strong>
  🤣🤣🤣.
 </p>
</body>
</html>

G. El selector sel1 ~ sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector sel1 ~ sel2
 </title>
 <style>
  /* Selecciona todos los
   *  strong
   * hermanos después de
   *  em */
  em~strong {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>
  Selector
  <em>sel1</em>
  <strong>~</strong>
  <em>sel2</em>
 </h1>
 <p>
  <em>Este</em>
  <strong>ejercicio</strong>
  está
  <em>muy</em>
  divertido
  <strong>ggg</strong>
  <em>jajaja</em>
  <!-- superíndice -->
  <sup>jejeje</sup>
  <strong>jijiji</strong>
  🤣🤣🤣.
 </p>
</body>
</html>

H. La lista de selectores sel1 , sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Selector sel1 , sel2
 </title>
 <style>
  /* Selecciona todos los
   *  h1, div y nav */
  h1,
  div,
  nav {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>Selector sel1 , sel2</h1>
 <p>Hola.</p>
 <nav>Navegación.</nav>
 <div>Adios.</div>
</body>
</html>

I. La pseudoclase :active

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Selector :active</title>
 <style>
  :active {
   color: blue;
  }

  span:active {
   background-color: yellow;
  }
 </style>
</head>
<body>
 <h1>Selector :active</h1>
 <p><button>Haz Click</button></p>
 <p><span>Haz Click</span></p>
</body>
</html>

J. La pseudoclase :focus

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width,
       initial-scale=1.0">
 <title>Selector :focus</title>
 <style>
  :focus {
   color: red;
  }

  input:focus {
   background-color: yellow;
  }

  textarea,
  input {
   display: block;
  }
 </style>
</head>
<body>
 <h1>Selector :focus</h1>
 <p>
  <label>
   Nombre
   <input>
  </label>
 </p>
 <p>
  <label>
   Relato
   <textarea></textarea>
  </label>
 </p>
 <p>
  <span>Intenta teclear</span>
 </p>
</body>
</html>

K. Resumen