hijos - selector padre css

¿Cuál es la diferencia entre las clases CSS.foo.bar(sin espacio) y.foo.bar(con espacio)

Question

Posible duplicado:
Diferencia entre .classA.classB y .classA .classB en CSS?

¿Podría explicarme la diferencia entre estas dos sintaxis de clases CSS?

.element .symbol {}

y

.element.large .symbol {}

No entiendo la diferencia entre los dos. La primera línea indica dos clases diferentes a las cuales se aplican los mismos estilos. Pero sobre el segundo, ¿cuál es el significado de ''.large'' que está escrito adjunto a ''.element''?

Answer 1

Creo que tienes un ligero malentendido sobre lo que significa el primero.

.element .symbol {}

Significa que esas configuraciones CSS se aplican a cualquier elemento HTML con el .symbol la clase que está dentro de un elemento con el elemento de clase.

<div class="element">
    <div class="symbol" />
</div>

En este ejemplo, su primera entrada de CSS afectaría a la etiqueta <div> en el medio.

Su segundo ejemplo significa que la primera clase requiere que se vean afectadas dos clases. Aparte de eso, es igual al primero.

<div class="element large">
    <div class="symbol" />
</div>

Entonces, si el HTML se ve así, los valores CSS se aplicarán también a la etiqueta <div> interna.

Si desea establecer etiquetas CSS que se apliquen a varias clases por separado, entonces debe dividirlas mediante una coma. Entonces se ve así:

.element, .symbol {}

Editar: a petición, el enlace a la documentation de los selectores de CSS.

Answer 2

Deberías usar .element .symbol esto donde tienes un elemento dentro de otro elemento. Por ejemplo:

<div class="element">
    <i class="symbol"></i>
</div>

Si en el .element.large .symbol diferenciar algunos div, podrías agregar una clase adicional para apuntar solo a aquellos que difieren, y .element.large .symbol con .element.large .symbol . Así por ejemplo:

<div class="element large">
    <i class="symbol"></i>
</div>

Answer 3

En su segundo ejemplo, la primera parte del selector es simplemente un elemento con dos clases, como en <span class="element large"> o <span class="large element"> .

En general, cada parte de un selector se aplica a un elemento HTML.

table[border].clname significa una tabla con un atributo border y una clase de clname, mientras que table [border] .clname significa un elemento con class clname, en un elemento con un atributo border, en una tabla.

(Editar: bueno, digo "un elemento HTML", pero por supuesto puedes tener más de una tabla a la que esto se aplica. Entiendes).

Answer 4

Utilizando

.element.large

se refiere a un elemento con ambas clases:

<div class="element large"></div>

en lugar de un descendiente de un elemento:

.element .large

lo que significa que en:

<div class="element">
    <div class="large"></div>
</div>

solamente

<div class="large"></div>

está ''recibiendo'' los estilos.

Básicamente , estar separados por un espacio implica dos elementos con una relación descendant .

Answer 5

.element .symbol

significa .symbol inside .element

.element.symbol

significa .element que también tiene el symbol clase.

Asi que,

.element.large .symbol

significa .symbol inside .element que también tiene la clase large .