sel1 > sel2
Seleciona los elementos que cumplan con el selector de la derecha y que sean hijos directos de los elementos que cumplan con el seletor de la izquierda.
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> |