¿Cómo hacer referencia a un nombre de clase larga con espacios en CSS?

Question

Estoy tratando de darle un toque a la salida de Drupal. En particular, estoy tratando de hacer referencia a una clase con un nombre súper largo (que incluye espacios). No estoy seguro de la sintaxis para esto. Perdóname, soy un novato en CSS. Ver:

<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document"> 
    <header> 
     <h2 property="dc:title" datatype=""><a href="/~actionin/node/38">National Nutrition Month: March 2012: “Get Your Plate in Shape”</a></h2> 

En última instancia, quiero hacer referencia a la propiedad H2. Estaba pensando que sería algo así como:

.node SOMETHING-HERE .header h2 { declaration; } 

no puedo hacer referencia al nodo, ya que se utiliza en otro lugar para otros fines. Quiero ser específico y seleccionar sólo esta clase: (.) ​​

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

Answer 1

El uso de puntos se puede combinar múltiples clases como un grupo

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix { 
... 
} 

Answer 2

Esos espacios son efectivamente múltiples clases, por un elemento, por lo su etiqueta <article> tiene la clase "nodo" y la clase "artículo-nodo", y así sucesivamente.

Así que si había:

.node { background-color: black; } 
.node-article { color: white; } 

A continuación, el artículo podría tener un fondo negro y texto blanco. Ambos serían aplicados.

Recuerde también puede hacer referencia a las etiquetas, y las identificaciones, por lo que para llegar a su H2 que podría hacer:

article header h2 { .... } 

o

#node-38 header h2 { .... } 

Y que necesariamente no necesitan la "cabecera" ahí dentro, dependiendo de lo que quieras lograr.

Si desea seleccionar todos los <h2> s que son descendientes de <article> etiquetas con el "nodo-artículo" clase, entonces usted puede hacer esto:

article.node-article h2 

Answer 3

Tal vez no te voy a dar la respuesta que es necesario, pero los nombres de clase no pueden contener espacios.

Un elemento puede tener múltiples clases, lo que le permite combinar múltiples reglas de estilo para diferentes clases para aplicar a un solo elemento.

Si tiene espacios en un atributo de clase, crea un elemento con múltiples clases, delimitadas por espacios.

Por ejemplo, si tiene un elemento como este

<div class="big red outlined"></div> 

y tenías CSS como esto

.big { 
    width: 1000px; 
    height: 1000px; 
} 

.red { 
    color: red; 
} 

.outlined { 
    border: 1px solid black; 
} 

Los tres estilos se pueden aplicar a la única div para que sea grande, roja y resumido

En su caso, parece que está intentando acceder a un elemento específico, que es el propósito del atributo id.Observe que el nodo tiene un identificador único:

<article id="node-38"> 

Se puede acceder a un elemento con un ID específico en CSS mediante el selector #, como este

#node-38 { 
    //style goes here 
} 

En su caso, es probable que desee hacer algo como esto:

#node-38 .header h2 { 
    //style goes here 
} 

Answer 4

Cuando se define un elemento con una clase, incluidos los espacios en realidad denota múltiples clases.

Ese artículo en realidad tiene aplicadas las siguientes clases: nodo, artículo-nodo, nodo-avance, contextual-links-region, node-even, publicado, con-comentarios, node-teaser y clearfix.

Puede utilizar cualquiera de esas clases al orientar el elemento. Si estuviera haciendo referencia a la etiqueta H2 que haría algo así como

article#node-38 header h2{ 

Esta es una manera mucho más específica para apuntar que el uso de todas esas clases. es una sintaxis más corta, y más específica para el elemento que desea diseñar.

Answer 5

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

La línea superior contiene un total de 9 clases debido a espacios entre ellas. entonces, node es una clase única, node-article es otra clase y así sucesivamente. Si desea hacer referencia a una clase, entonces debería escribirlo como

.node{background-color:red;} 

Si desea hacer referencia a varias clases a la vez y quiere aplicar mismos estilos entonces se puede escribir como

.node, node-article, node-teaser{background-color:red;} 

En ese caso tres clases individuales nodenode-articlenode-teaser tendrán el mismo estilo con el color de fondo rojo. Ahora bien, si tiene varios elementos con la misma clase, es decir, article, todos los artículos con la misma clase tendrán el mismo estilo. Para aplicar un estilo a un elemento único que pueda id en lugar de class como id = "nodo-38" y se puede aplicar estilo con CSS a este elemento como

article#node-38{background-color:red;} 

para seleccionar/referencia a la h2 dentro de cabecera con los padres elemento artículo que tiene id = "node-38" puede escribir

article#node-38 header h2{background-color:red;}