Is there a way to refer to an html element with multiple classes?

Question

I have the following

<p class="main yellow">Hello World</p>

I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?

Eg. the following doesn't work, but would be what I'm after

.main + .yellow { color:green }

Answer 1

You just need to specify them as

.main.yellow { color: green; }

No space between the two classes.

Answer 2

does this work for you?

.main.yellow{
  color:green;
}

Answer 3

This should grab it:

.main.yellow { color:yellow; }

Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.

Answer 4

As others have already said, what you want is:

.main.yellow { color:green; }

However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.

Your example would have matched the following HTML...

<p class="main">Hello</p>
<p class="yellow">World</p>

...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".