edit css style of an element with a space in its class name

Question

I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.

This its structure:

<li class="post quote">
    {other code}
</li>

The problem is that the class name has a space in it.

How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.

That would ordinarily be interpreted as two classes, which you can select with .post.quote (or .quote.post), though some versions of IE have issues with it. — reisio, Jan 14 '11 at 20:55
See [similar question, with more clues about how browsers must to interpret multiple class names](http://stackoverflow.com/q/13808846/287948). — Peter Krauss, Dec 11 '12 at 10:10

score 19 · Accepted Answer · answered Jan 14 '11 at 20:54

19

The problem is that the class name has a space in it.

This is not possible in CSS. What you are doing is giving the element two classes.

You can address them such:

.post.quote { .... }

but in your case, it's probably better to use a valid separator like

post_quote

answered Jan 14 '11 at 20:54

Pekka

418,526
129
929
1,058

It is an *override by class name*... But you say "This is not possible in CSS"?? InDesign5+ do this, and a lot of web-designers... There are a W3C rule that say "it is not valid"? – Peter Krauss Dec 10 '12 at 20:20
@Peter class names with spaces are impossible - how would you refer to them? Consider `.class name { font-size: 10px }` - `class` refers to a class, and `name` to a sub-element. It's not possible, try it out. – Pekka Dec 10 '12 at 20:30
Yes, `class="a b"` is not a unique class name, like `class="a_b"`. My question is about the expected override effect in the HTML renderizarion (`b` overrides `a` in this example)... There are a W3C valid standard? Or it is an Adobe Indesign (export HTML) invention? – Peter Krauss Dec 10 '12 at 20:43
@Peter I'm not sure what you mean by "override" exactly? – Pekka Dec 10 '12 at 20:44
Example: at css definition we have ".a { font-weight: bold;} .b { font-weight: normal;}", and at HTML body we have `
not bold text
`... So, IF browser renders with normal text, we can say that class `b` overrides `a`. Well, my browser not do this always... OK, I am submitting a new question, see http://stackoverflow.com/q/13808846/287948 – Peter Krauss Dec 10 '12 at 20:48
@Peter ahh, I see now. No, as far as I know, that should never be valid – Pekka Dec 10 '12 at 20:58

score 2 · Answer 2 · answered Jan 14 '11 at 20:55

2

This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:

// css
.post { ... }   // elements with the post class
.quote { ... }  // elements with the quote class

// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');

You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:

// css
.post.quote { ... }  // elements with both the post and quote classes

// jQuery
var postAndQuoteLis = $('.post.quote');

answered Jan 14 '11 at 20:55

Dexter

17,257
4
42
52

I'm not using jQuery though. How would I do that in CSS: .post .quote { }? – nkcmr Jan 14 '11 at 20:57
The selectors (the bits in the quote marks above) are the same in css – Dexter Jan 14 '11 at 20:58

score 0 · Answer 3 · answered Jan 14 '11 at 21:03

0

This might work:

$('li').each(function() {     
    if($(this).attr('class').indexOf(" ")>-1) {
       $(this).css('border','1px solid #ff0000')
    }  
}

answered Jan 14 '11 at 21:03

Diodeus - James MacFarlane

107,156
31
147
171

edit css style of an element with a space in its class name

3 Answers3

Linked