Además de los selectores visto en los puntos hay una serie de métodos para seleccionar elementos dependiendo de la estructura del documento HTML, son los denominados combinadores CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="selectores.css">
</head>
<body>
<main>
<div class="container">
<div class="articulo">
<strong>Tecnología</strong>
<span>Ordenadores</span>
<strong>Xiaomi</strong> <!-- Yo soy su hermano -->
<p>pero yo <strong>no, porque estoy dentro de un párrafo</strong></p>
<strong>Pero yo sí</strong>
</div>
<div class="articulo">
<span>Tablets</span>
<span>Xiaomi</span>
<span>2021</span>
</div>
<article>
<div> <!-- Se aplica aun siendo "nieto" u no hijo directo-->
<p>Otro ejemplo</p>
</div>
</article>
</div><!-- Cerramos el div con class container -->
<div><!-- No se aplica -->
<p>Aquí no se aplicará</p>
</div>
</main>
<footer>
<div> <!-- No aplica -->
<p>Página realizada por...</p>
</div>
</footer>
</body>
</html>
