handling css id and classes with spaces

Question

I have a paragraph as

<p id="para one" class="paragraph one">Content</p> 

How does one represent the id and class with spaces in the css

When I use

#para#one{ }  .paragraph.one{ } 

It does not work with the css above.

Answer 1

Just came across this one myself (styling an existing page with no way to change the id).

This is what I used to style it by id:

p[id='para one']{ } 

And, as said previously, .paragraph.one selects two classes - this means it will also select elements with class=" one paragraph" and class="not a paragraph this one".

Answer 2

Your class CSS is correct. You don't have a class with a space in it, you have two classes, "paragraph" and "one". Your CSS properly selects elements that have both of those classes:

.paragraph.one { color: red; } 

This is a useful technique for splitting out facets of the element into separate classes that can be combined individually. Note also that <p class="one paragraph"> will match the same selector.