10. 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.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Selector *</title>
8 <style>
9 * {
10 /* Texto centrado. */
11 text-align: center;
12 }
13 </style>
14</head>
15<body>
16 <h1>Selector *</h1>
17 <p>Hola.</p>
18</body>
19</html>

B. El selector #identificador

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector #identificador
9 </title>
10 <style>
11 /* Seleciona el elemento con
12 * id="neg" */
13 #neg {
14 /* negritas */
15 font-weight: bold;
16 }
17
18 /* Seleciona el elemento de tipo
19 * p
20 * con
21 * id="otro" */
22 p#otro {
23 /* mayúsculas */
24 text-transform: uppercase;
25 }
26
27 /* Seleciona el elemento de tipo
28 * h1
29 * con
30 * id="chas".
31 * No se aplica porque el único
32 * elemento con
33 * id="chas"
34 * es de tipo
35 * p */
36 h1#chas {
37 color: green;
38 }
39 </style>
40</head>
41<body>
42 <h1>Selector #identificador</h1>
43 <p>Uno.</p>
44 <p id="chas">Dos.</p>
45 <p>Tres.</p>
46 <p id="otro">Cuatro.</p>
47</body>
48</html>

C. El selector .clase

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Selector .clase</title>
8 <style>
9 /* Seleciona los elementos cuyo
10 * atributo
11 * class
12 * contenga el identificador
13 * azu */
14 .azu {
15 color: blue;
16 }
17
18 /* Seleciona los elementos cuyo
19 * atributo
20 * class
21 * contenga los identificadores
22 * ama y azu */
23 .ama.azu {
24 /* letra itálica */
25 font-style: oblique;
26 }
27
28 /* Seleciona los elementos tipo
29 * p
30 * cuyo atributo
31 * class
32 * contenga el identificador
33 * ama */
34 p.ama {
35 background-color: yellow;
36 }
37
38 /* Seleciona los elementos tipo
39 * p
40 * cuyo atributo
41 * class
42 * contenga los identificadores
43 * ama y ver */
44 p.ama.ver {
45 /* Alínea el texto al final de
46 * la línea. */
47 text-align: end;
48 }
49 </style>
50</head>
51<body>
52 <h1 class="ama azu">
53 Selector .clase
54 </h1>
55 <p class="ver azu ama">
56 Uno.
57 </p>
58 <p class="azu">Dos.</p>
59 <p>Tres.</p>
60 <p class="ama">Cuatro.</p>
61 <p class="ama ver">Cinco.</p>
62 <footer class="azu">
63 <p>
64 © 2021
65 Gilberto Pacheco Gallegos.
66 </p>
67 </footer>
68</body>
69</html>

D. El selector sel1 > sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector sel1 > sel2
9 </title>
10 <style>
11 /* Selecciona todos los
12 * em
13 * que sean hijos directos de
14 * p */
15 p>em {
16 background-color: yellow;
17 }
18 </style>
19</head>
20<body>
21 <h1>
22 Selector
23 <em>sel1</em>
24 <strong>></strong>
25 <em>sel2</em>
26 </h1>
27 <p>
28 <strong>
29 Énfasis fuerte.
30 </strong>
31 <em>Énfasis.</em>
32 Más texto.
33 <span>
34 <em>Otro énfasis.</em>
35 <strong>
36 Otro énfasis fuerte.
37 </strong>
38 <span>
39 <em>Hola.</em>
40 <strong>Adios.</strong>
41 </span>
42 </span>
43 </p>
44 <footer>
45 <p>
46 <em>© 2021</em>
47 Gilberto Pacheco Gallegos.
48 </p>
49 </footer>
50</body>
51</html>

E. El selector sel1 sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector sel1 sel2
9 </title>
10 <style>
11 /* Selecciona todos los
12 * em
13 * que sean descendientes en
14 * cualquier nivel de
15 * anidamiento de
16 * p */
17 p em {
18 background-color: yellow;
19 }
20 </style>
21</head>
22<body>
23 <h1>
24 Selector
25 <em>sel1</em>
26 <em>sel2</em>
27 </h1>
28 <p>
29 <strong>
30 Énfasis fuerte.
31 </strong>
32 <em>Énfasis.</em>
33 Más texto.
34 <span>
35 <em>Otro énfasis.</em>
36 <strong>
37 Otro énfasis fuerte.
38 </strong>
39 <span>
40 <em>Hola.</em>
41 <strong>Adios.</strong>
42 </span>
43 </span>
44 </p>
45 <footer>
46 <p>
47 <em>© 2021</em>
48 Gilberto Pacheco Gallegos.
49 </p>
50 </footer>
51</body>
52</html>

F. El selector sel1 + sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector sel1 + sel2
9 </title>
10 <style>
11 /* Selecciona todos los
12 * strong
13 * inmediatamente después de
14 * em */
15 em+strong {
16 background-color: yellow;
17 }
18 </style>
19</head>
20<body>
21 <h1>
22 Selector
23 <em>sel1</em>
24 <strong>+</strong>
25 <em>sel2</em>
26 </h1>
27 <p>
28 <em>Este</em>
29 <strong>ejercicio</strong>
30 está
31 <em>muy</em>
32 divertido
33 <strong>ggg</strong>
34 <em>jajaja</em>
35 <!-- subíndice -->
36 <sub>jejeje</sub>
37 <strong>jijiji</strong>
38 🤣🤣🤣.
39 </p>
40</body>
41</html>
>

G. El selector sel1 ~ sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector sel1 ~ sel2
9 </title>
10 <style>
11 /* Selecciona todos los
12 * strong
13 * hermanos después de
14 * em */
15 em~strong {
16 background-color: yellow;
17 }
18 </style>
19</head>
20<body>
21 <h1>
22 Selector
23 <em>sel1</em>
24 <strong>~</strong>
25 <em>sel2</em>
26 </h1>
27 <p>
28 <em>Este</em>
29 <strong>ejercicio</strong>
30 está
31 <em>muy</em>
32 divertido
33 <strong>ggg</strong>
34 <em>jajaja</em>
35 <!-- superíndice -->
36 <sup>jejeje</sup>
37 <strong>jijiji</strong>
38 🤣🤣🤣.
39 </p>
40</body>
41</html>

H. La lista de selectores sel1 , sel2

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Selector sel1 , sel2
9 </title>
10 <style>
11 /* Selecciona todos los
12 * h1, div y nav */
13 h1,
14 div,
15 nav {
16 background-color: yellow;
17 }
18 </style>
19</head>
20<body>
21 <h1>Selector sel1 , sel2</h1>
22 <p>Hola.</p>
23 <nav>Navegación.</nav>
24 <div>Adios.</div>
25</body>
26</html>

I. La pseudoclase :active

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Selector :active</title>
8 <style>
9 :active {
10 color: blue;
11 }
12
13 span:active {
14 background-color: yellow;
15 }
16 </style>
17</head>
18<body>
19 <h1>Selector :active</h1>
20 <p><button>Haz Click</button></p>
21 <p><span>Haz Click</span></p>
22</body>
23</html>

J. La pseudoclase :focus

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Selector :focus</title>
8 <style>
9 :focus {
10 color: red;
11 }
12
13 input:focus {
14 background-color: yellow;
15 }
16
17 textarea,
18 input {
19 display: block;
20 }
21 </style>
22</head>
23<body>
24 <h1>Selector :focus</h1>
25 <p>
26 <label>
27 Nombre
28 <input>
29 </label>
30 </p>
31 <p>
32 <label>
33 Relato
34 <textarea></textarea>
35 </label>
36 </p>
37 <p>
38 <span>Intenta teclear</span>
39 </p>
40</body>
41</html>

K. El atributo style

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8 <title>Atrinuto style</title>
9 <style>
10 p {
11 color: olive;
12 font-style: italic;
13 }
14 </style>
15</head>
16
17<body>
18 <p style="color: yellow;
19 background-color: blue">
20 Párrafo de letra amarilla y fondo
21 azul.
22 </p>
23 <p>Párrafo normal.</p>
24</body>
25
26</html>

L. Resumen