handling css id and classes with spaces

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".


class="paragraph one" 

actually represents two different classes

id="para one"

won't work, but you'll probably end up having an actual id of para


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.

Tags:

Css