How to reference a long class name with spaces in CSS?

I'm trying to style some Drupal output. In particular, I'm trying to reference a class with a super long name (that includes spaces). I'm unclear the syntax for this. Forgive me, I'm a CSS newbie. See:

<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>

I ultimately want to reference the H2 property. I was thinking it would be something like:

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

I cannot just reference the node, since it is used elsewhere for other purposes. I want to be specific and select only this class:

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

Maybe I'm not giving you the answer you need, but **class names cannot contain spaces**.

An element can have multiple classes, which allows you the combine multiple styling rules for different classes to apply to a single element.

If you have spaces in a class attribute, it creates an element with multiple classes, delimited by spaces.

For example, if you have an element like this

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

and you had CSS like this

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

.red {
color: red;
}

.outlined {
border: 1px solid black;
}

All three styles would be applied to the single div to make it big, red, and outlined.

In your case, it looks like you are trying to access a specific element, which is what the purpose of the `id` attribute is. Notice that the node has a unique id:

<article id="node-38">

You can access an element with a specific id in CSS by using the `#` selector, like this

#node-38 {
//style goes here
}

In your case, you probably want to do something like this:

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

Those spaces are effectively multiple classes on the one element, so your `<article>` tag has the "node" class, and the "node-article" class, and so on and so on.

So if you had:

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

Then the article would have a black background, and white text. Both would be applied.

Also remember you can reference tags, and ids, so to get to your H2 you could do:

article header h2 { .... }

or

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

And you don't necessarily need the "header" in there either, depending on what you want to achieve.

If you want to select all `<h2>`s that are descendants of `<article>` tags with the "node-article" class, then you can do this:

article.node-article h2

When you define an element with a class, including spaces actually denotes multiple classes.

That article actually has the following classes applied to it : node, node-article, node-teaser, contextual-links-region, node-even, published, with-comments, node-teaser, and clearfix.

You could use any of those classes when targeting the element. If I were referencing the H2 tag I would do something like

article#node-38 header h2{

This is a much more specific way to target than using all of those classes. it's shorter syntax, and more specific to the element you want to style.

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

Above line contains total 9 classes because of spaces between them. so, `node` is a single class, `node-article` is another class and so on. If you want to reference a class then you should write it like

.node{background-color:red;}
If you want to reference multiple classes at once and want to apply same styles then you can write like

.node, node-article, node-teaser{background-color:red;}
In that case three individual classes `node` `node-article` `node-teaser` will have the same style with background color red. Now if you have multiple elements with same class i.e. `article` then all article with same class will have same style. To apply a style to a unique element you can `id` instead of `class` like id="node-38" and you can apply style with CSS to this element like

article#node-38{background-color:red;}
to select/reference the h2 inside header with parent element article that has id="node-38" you can write

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

Using dots (.) you can combine multiple class as a group

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