¿Cómo selecciono un elemento que tiene una determinada clase?

Tengo entendido que el uso element.classdebe permitir que un elemento específico asignado a una clase reciba un "estilo" diferente al del resto de la clase. Esta no es una pregunta sobre si esto debería usarse o no, sino que estoy tratando de entender cómo se pretende que funcione este selector. Al mirar un montón de ejemplos en Internet, creo que la sintaxis es correcta y no entiendo por qué esto no funciona.

Aquí hay un ejemplo:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Debería ser así:

h2.myClassbusca h2 con clase myClass. Pero en realidad desea aplicar estilo para h2 en el interior .myClasspara poder usar el selector descendiente .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Manifestación

Esta referencia le dará una idea básica sobre los selectores y echar un vistazo a los selectores descendientes

h2.myClassse refiere a todos h2con class="myClass".

.myClass h2se refiere a todos los h2elementos secundarios (es decir, anidados en) con class="myClass".

Si desea que h2en su HTML aparezca en azul, cambie el CSS a lo siguiente:

.myClass h2 {
    color: blue;
}

Si desea poder hacer referencia a eso h2por una clase en lugar de su etiqueta, debe dejar el CSS como está y dar la h2clase a en el HTML:

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

El selector element.class es para situaciones de estilo como esta:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Tanto a su intervalo como a p se les asignará el tamaño de fuente y el peso de fuente de .large, pero el color azul solo se asignará a p.

Como han señalado otros, estás trabajando con selectores descendientes.

h2.myClasssolo es válido para h2elementos que tienen la clase myClassasignada directamente.

Quieres anotarlo así:

.myClass h2

Que selecciona todos los hijos de los myClassque tienen el nombre de etiquetah2

El :first-childselector de CSS le permite apuntar a un elemento que es el primer elemento hijo dentro de su padre.

element:first-child { style_properties }
table:first-child { style_properties }