Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

drupal

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" 
like image 538
Doug Avatar asked Mar 27 '12 01:03

Doug


People also ask

Can you have a space in a CSS class name?

The class name can't contain a space, but it can contain hyphens or underscores. Any tag can have multiple space-separated class names.

How do you select a class with space in CSS?

They are called multiple class selectors. You basically just need to make sure all the class names are connected (no spaces between them) and separated with a dot. Show activity on this post. Classes will never actually have spaces in their name.

Can class names have spaces in HTML?

A class name can't have spaces. When you have a space-separated string in your class attribute, you're always giving your element several classes.

Can CSS id have spaces?

You simply can't have spaces. If you use a space it means you're using two different classes.


2 Answers

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  }  
like image 30
Peter Olson Avatar answered Sep 23 '22 21:09

Peter Olson


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 {  ... } 
like image 161
joomlearner Avatar answered Sep 21 '22 21:09

joomlearner