Definición de un estilo en función del contexto
Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Definición de un estilo en función del contexto

Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples.

Este otro recurso que provee las hojas de estilo en cascada (css) es la definición de un estilo para un elemento HTML siempre y cuando la misma esté contenida por otro elemento determinado. Sólo en ese caso el estilo para dicha elemento se activará.

Supongamos que queremos que cuando disponemos un texto encerrado por el elemento strong dentro de un párrafo el color del mismo sea verde. Pero si el elemento strong está contenida por el elemento h1 el color debe ser rojo, luego la sintaxis del problema es:

<!DOCTYPE html>
<html>
<head>
 <title>Problema</title>
 <meta charset="UTF-8">
<style>
 p strong{ color:#0000ff; }
h1 strong{ color:#ff0000; }
</style>
</head>
<body>
<h1>Acá tenemos un título de nivel uno, luego un bloque con el elemento strong debe aparecer <strong>así</strong></h1>
<p> Luego si escribimos un párrafo y encerramos un bloque con el elemento strong debe aparecer <strong>así</strong> </p>
</body>
</html>
estilos en función del contexto

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

p strong{ color:#0000ff; }

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

h1 strong{ color:#ff0000; }

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

h1,strong{ color:#ff0000; }

Es decir que el texto contenido por los elementos h1 y strong deben aparecer de color rojo.

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

h1 em { color:#ff0000; }

Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por el elemento em siempre y cuando esté contenida en un elemento h1 y esta a su vez dentro de un div.

La página completa queda codificada de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
 <title>Problema</title>
 <meta charset="UTF-8">
<style> 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>
estilos en función del contexto