Tutorial de CSS - Temarios

Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. Sólo en ese caso el estilo para dicha marca se activará.
Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo, luego la sintaxis del problema es:

<html>
<head>
<title>Problema</title>
<style type="text/css">
p b{
  color:#0000ff;
}
h1 b{
  color:#ff0000;
}
</style>
</head>
<body>
<h1>Acá tenemos un título de nivel uno, luego un bloque con 
la marca bold debe aparecer <b>así</b></h1>
<p>
Luego si escribimos un párrafo y encerramos un bloque con la marca bold 
debe aparecer <b>así</b>
</p>
</body>
</html>

Es importante analizar la sintaxis para la definción de estilos en función del contexto. Tenemos:

p b{
  color:#0000ff;
}

Estamos diciendo que todas los bloques de la página que contengan la marca b (bold) y que estén contenidas por la marca p (párrafo) se pinten de azul. Si bien hay dos bloques en la página que están encerrados por la marca b, solo uno se pinta de color azul, el otro bloque se pinta de color verde, ya que tenemos:

h1 b{
  color:#ff0000;
}

Es decir, activar el color rojo para el contenido encerrado por la marca b, siempre y cuando se encuentre contenido por la marca h1.
No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML:

h1,b{
  color:#ff0000;
}

Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo.

Se pueden definir estilos en función del contexto, con mayor precisión, como por ejemplo:

div h1 em {
            color:#ff0000;
}

Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por la marca em siempre y cuando esté contenida en un bloque con la marca h1 y esta a su vez dentro de un div.
La página completa queda codificada de la siguiente forma:

<html>
<head>
<title>Problema</title>
<style type="text/css">
div h1 em {
  color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>

10 - Definición de un estilo en función del contexto.