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

81

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>

— Carolina
fuente

4

Podría valer la pena actualizar el título de la pregunta para reflejar que realmente está preguntando cómo funcionan los selectores de element.class, no por qué no funcionan de la manera que espera.

— Gabriel

105

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

— PSL
fuente

Para que quede claro, estoy tratando de entender cómo funciona el selector element.class. Estoy tratando específicamente de usar la sintaxis de element.class para anular el color del elemento (h2 que está en myClass) a azul en lugar del color de clase de verde. Me gustaría saber cómo apuntar a un elemento específico en una clase.

— Carolyn

@Carolyn si quieres eso, entonces necesitas usar myClass en h2. Como este jsfiddle.net/wDmwE . La razón es que la regla css en h2 anulará la clase .myClass en el contenedor.

— PSL

1

¡Increíble! Sí, su respuesta ayudó. Supongo que mi problema fue con la especificidad (apenas estoy aprendiendo sobre eso). ¡Gracias de nuevo!. Muy apreciado.

— Carolyn

1

Finalmente. Estuve buscando esta solución durante mucho tiempo. Sabía sobre elementWithAClass.Class {}, pero no sobre .Class elementInsideThisClass {}. Gracias. Te debo una cerveza: D

— kv1dr

58

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>

— ASGM
fuente

Gracias, en realidad estoy tratando de entender cómo usar el selector element.class. Quiero todos los elementos h2 en "myClass"

— Carolyn

@Carolyn, ¿ayuda mi respuesta actualizada? Si no es así, no tengo claro lo que estás preguntando.

— ASGM

¡¡Si, gracias!! Todavía estoy tratando de entender la especificidad.

— Carolyn

@Carolyn, ¿hay algo en particular con lo que tengas problemas?

— ASGM

ASGM: estaba teniendo problemas para entender cómo funciona el selector element.class. Desde que publiqué, he aprendido un poco más (junto con la información proporcionada en este sitio), por lo que no los estaba usando correctamente. Gracias,

— Carolyn

12

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.

— Andrew Clody
fuente

Gracias. Mucho. Todos han sido de gran ayuda.

— Carolyn

2

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

— RienNeVaPlu͢s
fuente

1

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 }

— Sreekumar P
fuente