2011-05-16 17 views
38

¿Hay una diferencia entre .class element y element.class en un selector de CSS? Siempre me habían mostrado element.class pero el otro día encontré un archivo CSS en el trabajo que tenía .class element y quería saber si esto era solo una elección de estilo (en cuyo caso yo haría que mis cambios coincidan), o si había un problema específico razón (en cuyo caso, no necesariamente me gustaría hacer coincidir mis cambios).¿cuál es la diferencia entre ".class element" y "element.class"?

+1

buena pregunta, también estoy confundido con estos productos ... – Jomia

+1

yup .. buena pregunta. – mahela007

Respuesta

52

element.class selecciona todos <element /> s con esa clase. .class element selecciona todos <element /> s que son descendientes de elementos que tienen esa clase.

Por ejemplo, en HTML:

<div class='wrapper'> 
    <div class='content'></div> 
    <div></div> 
    <div class='footer'></div> 
</div> 

Por ejemplo, CSS:

div.wrapper { 
    background-color: white; /* the div with wrapper class will be white */ 
} 

.wrapper div { 
    background-color: red; /* all 3 child divs of wrapper will be red */ 
} 
+0

Así que si usamos este último podemos omitir un nivel y evitar más anidamiento, para mantenerlo simple. – FaithReaper

11

"element.class" selecciona los elementos que tienen la clase dada.

".class element" selecciona todos los elementos que son hijos de cualquier cosa con la clase dada.

Ejemplo:

<div class="foo"> 
    <p>...</p> 
</div> 

div.foo se seleccionaría el div, mientras .foo p sería seleccionar el párrafo niño. Se debe tener en cuenta que sin especificar el elemento secundario directo a través del selector ">", esto recorrerá todo el árbol de documentos al buscar hijos.

-2

ejemplo muy sencillo:

HTML:

<ul class="a"> 
<li>1</li> 
<li class="a">2</li> 
<li>3</li> 
</ul> 

CSS:

.a li{color:blue;} 
li.a{color:red;} 
+1

¿Cómo es esto diferente/mejor que la [respuesta ya aceptada] (http://stackoverflow.com/a/6023440/215552)? –

+0

Bienvenido a Stack Overflow. Antes de responder una pregunta, revise otras respuestas a la pregunta y solo proporcione una respuesta propia si tiene información para agregar que no haya sido proporcionada por otro afiche.En este caso, su respuesta no se consideraría muy valiosa ya que no ha explicado nada en absoluto, pero es especialmente atroz ya que hay una respuesta muy bien escrita de * hace cinco años * que ha sido aceptada y votada. – AmericanUmlaut

0

me gusta pensar de la siguiente manera:

1) a, b = a OR b 
2) a b = a AND b (on that order) 
3) a.b = a.b  (on that order) 

2, 3) ab no es lo mismo que b a.
2) elementos que pertenecen a un y b simultáneamente, es decir, ni un o b elementos. Es una selección de rango.
3) a elementos de b clase. Es una selección exacta.

Cuestiones relacionadas