What is a space used for in an HTML-element class-declaration?

Question

Possible Duplicate:
HTML class attribute with spaces, it is a W3C valid class?

I'm using an existing HTML source code. Consider the following line:

<ul class="thumbs noscript">

What does an space mean between thumbs and noscript?

score 4 · Answer 1 · answered Dec 23 '12 at 17:38

4

It means there are two classes here: thumbs and noscript.

answered Dec 23 '12 at 17:38

raina77ow

103,633
15
192
229

score 2 · Accepted Answer · answered Dec 23 '12 at 18:33

2

The HTML element is using both of the classes which have been enlisted separated by a space.

answered Dec 23 '12 at 18:33

Sumit Gera

1,249
4
18
34

Christofer Eliasson · Answer 3 · 2012-12-23T17:45:32.487

A space is used to separate multiple classes in a class-declaration - so it basically means that both class thumbs and noscript apply to the UL-element.

To select an element that must have both those classes, through CSS, you can use a selector like this:

.thumbs.noscript {
   /* Properties that apply to elements that have both classes. */
}

Notice that there is no space between the classes in the rule declaration in CSS. If you put a space between the classes, then noscript instead have to be a child of thumbs for the rule to apply.

A CSS-rule as the one above is useful when you want to apply CSS-properties to elements that have both classes, but not to elements that only have one, or non of the classes.

score 0 · Answer 4 · answered Dec 23 '12 at 17:38

0

This means that this element has 2 classes. Both thumbs and noscript

This means you can select this element using css like so:

.thumbs { color:#f00; }
.noscript { color:#000; }

OR

.thumbs.noscript { color:#fff; }

answered Dec 23 '12 at 17:38

Undefined

11,234
5
37
62

That first example kind of sucks. It would be better to have different rules in those two classes. – ThiefMaster Dec 23 '12 at 17:40
I altered it to include different colors :) – Undefined Dec 23 '12 at 17:41

score 0 · Answer 5 · answered Dec 23 '12 at 17:38

0

The space is to keep multiple classes separate.

answered Dec 23 '12 at 17:38

Moseleyi

2,585
1
24
46

score 0 · Answer 6 · answered Dec 23 '12 at 17:38

An element can have multiple classes, so in this case it has the classes "thumbs" and "noscript". So she space between the class names simply separates them.

Looking at the name chances are good that there is some CSS that e.g. always shows elements with the class "noscript". Using JavaScript this class is probably removed on page load to make the page work even nicer for anyone that has JavaScript enabled.

score 0 · Answer 7 · answered Dec 23 '12 at 18:04

0

It's so you can use multiple classes - so you might be re-using a few in different areas of the site.

A real life example might be:

.thumbs {width:150px; height:150px; background-colour:#fff;}
.noscript {clear:both;}

answered Dec 23 '12 at 18:04

Dave

498
2
7
22

What is a space used for in an HTML-element class-declaration?

7 Answers7