14

I'm working on some CSS from a tutorial, a div has this class:

<div class="related products">

How can I reference it in the stylesheet?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Rob
  • 6,304
  • 24
  • 83
  • 189
  • possible duplicate of [How to select classes with spaces](http://stackoverflow.com/questions/6885013/how-to-select-classes-with-spaces) – BoltClock Aug 11 '11 at 13:09

4 Answers4

21

The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:

.related { color:#ff0000 }
.products { font-size:12px }

If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:

.related.products { font-weight:bold }

And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
6

div.related.products is the general method

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • Is the order significant, ie would `div.products.related` work too? – ain Aug 11 '11 at 13:13
  • @ain: [Only for IE6](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305) - for other browsers it doesn't matter. – BoltClock Aug 11 '11 at 13:14
2

You reference it by div.related.products which literaly translates to "a div with class of related and class of products".

Or, you could reference it by using either class names, since it will catch both.

jsFiddle Example.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
-5

In the css, just put the name class of the div by doing this:

.related products {
/*styling to go here*/
}

Now any styling within the related products class will be applied to that div.

Aaron Lee
  • 1,146
  • 3
  • 14
  • 29