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.

possible duplicate of [handling class name with spaces in it html](http://stackoverflow.com/questions/9284313/handling-class-name-with-spaces-in-it-html) by the same user. — Andrew Marshall, Feb 14 '12 at 22:58

score 60 · Answer 1 · answered Mar 07 '13 at 18:33

60

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

answered Mar 07 '13 at 18:33

Rono

601
1
6
2

5

Not sure why the answer by Mikey G was selected as correct. The suggestion here worked absolutely fine to hide a compliciated class name in a wordpress widget. – David Oct 17 '15 at 13:06
Upvoted, best answer, works well in Tampermonkey too. – javabrett May 27 '16 at 00:26
1

you don't even need the "p", could just use [id='para one']{} – Vlad V Jun 04 '19 at 14:53

score 30 · Answer 2 · answered Feb 14 '12 at 22:57

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.

score 18 · Accepted Answer · answered Feb 14 '12 at 22:57

18

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

answered Feb 14 '12 at 22:57

Mikey G

3,473
1
22
27

4

If you have no control over these white spaced IDs, you can still target them like this: `#para\ one` or by doing a substring match `[id*='para']` – carlo Jun 07 '19 at 09:43

score 14 · Answer 4 · answered Feb 14 '12 at 22:57

You can't have spaces in id values or class names. When you have spaces in the value of the class attribute it specifies multiple classes that apply to that element:

<p class="paragraph one"> <!--Has both "paragraph" and "one" class-->

As for id values, the rules (HTML4) state the following:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

As you can see, spaces are not valid. The HTML5 spec is more leniant, but spaces are still not allowed (emphasis added):

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

score 8 · Answer 5 · answered Nov 18 '16 at 13:25

8

Modern browsers actually support id with spaces. So on Chrome 54 this works:

p#para\ one {
}

And modern browsers do not support the [id="..."] syntax, so

p[id='para one'] {
}

does not work in Chrome 54.

answered Nov 18 '16 at 13:25

Adi Fairbank

369
3
2

I'm using Robot Framework, so needed double backslash: `${firstNameId} css=#first\\ name` – Darren Parker Sep 14 '20 at 20:41

score 1 · Answer 6 · answered Feb 14 '12 at 22:57

1

You simply can't have spaces. If you use a space it means you're using two different classes. One is para and the other one is one.

answered Feb 14 '12 at 22:57

elclanrs

92,861
21
134
171

handling css id and classes with spaces

6 Answers6

Linked

Related