How to reference a long class name with spaces in CSS?
Solution 1
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 {
...
}
Solution 2
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
}
Solution 3
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
Solution 4
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;}
Doug
Updated on December 11, 2020Comments
-
Doug over 3 years
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"
-
Doug about 12 yearsHow do I reference the H2 property, then? Is there a way to specify that it falls under an article property with x, Y, and Z classes?
-
Peter Olson about 12 years@Doug You should use the
id
attribute if you want to reference a specific element, or add another class if you want a stlye that can apply to a new group of elements. -
joshuahealy about 12 years@Doug You can do
article.x.Y.Z h2
-
Peter Krauss over 11 yearsIt is an override by class name... But you say "class names cannot contain spaces". InDesign5+ do this, and a lot of web-designers... There are a W3C rule that say "it is not valid"?
-
Peter Olson over 11 years@PeterKrauss According to the W3C HTML specification, "Multiple class names must be separated by white space characters.". If class names could contain spaces, there would not be a way to disambiguate between a single class and multiple classes. Hence, a single class name cannot contain spaces.
-
Peter Krauss over 11 yearsSorry, I use the term "name" but the correct is "attribute value" (of the HTML attribute
class
), so, we say the some thing... My real question now is here. -
LB-- over 9 yearsWhat's the difference between that and using commas between the classes?
-
WORMSS over 7 years@LB-- commas mean or dot means and so
.node.node-article
means a element needs to have both classes. Where as.node, .node-article
means if it has atleast one of them.