varias - tipos de selectores css etiqueta id clase pseudo selectores compuestos

¿Qué significa un espacio en un selector de CSS? es decir, ¿cuál es la diferencia entre.classA.classB y.classA.classB?

Question

¿Cuál es la diferencia entre estos dos selectores?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

Answer 1

Un estilo como este es mucho más común, y apuntaría a cualquier tipo de elemento de clase "clase B" que esté anidado dentro de cualquier tipo de elemento de clase "clase A".

.classA .classB {
  border: 1px solid; }

Funcionaría, por ejemplo, en:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Este, sin embargo, se dirige a cualquier tipo de elemento que sea de la clase "classA", así como de la clase "classB". Este tipo de estilo se ve con menos frecuencia, pero sigue siendo útil en algunas circunstancias.

.classA.classB {
  border: 1px solid; }

Esto se aplicaría a este ejemplo:

<p class="classA classB">asdf</p>

Sin embargo, no tendría ningún efecto sobre lo siguiente:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Tenga en cuenta que cuando un elemento HTML tiene múltiples clases, están separados por espacios).

Answer 2

.classA.classB refiere a un elemento que tiene las dos clases A y B ( class="classA classB" ); mientras que .classA .classB refiere a un elemento con class="classB" desciende de un elemento con class="classA" .

Editar: Especificación para referencia: Selectores de atributos (Ver sección 5.8.3 Selectores de clase)