Handling CSS Id and Classes with Spaces

handling css id and classes with spaces

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

How to reference a long class name with spaces in CSS?

Using dots (.) you can combine multiple class as a group

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
 ...
}

Is it possible to use the space character in CSS class names?

https://html.spec.whatwg.org/multipage/dom.html#classes

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

Of course it’s possible to escape a space character, e.g. — HTML attribute values can contain character references per https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value:

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

However, it doesn’t matter whether the space is HTML-escaped or not for the above statement to apply. A HTML-encoded space character still decodes to a space character, and so e.g. class="a b" still results in “a set of space-separated tokens”. See e.g. https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state for how double-quoted attribute values are parsed.

When to put space between a tag name and a class or id

header.classname mean you are targeting header having class as classname.

header .classname mean you are targeting the html element having class classname which is a child/descendent of header

1st case:

header.hclassname {

  background: turquoise;

}

<header class="hclassname">

  Lorem Ipsum

  <div class="divclassname">Dolor</div>

  Sit Amet

</header>

handling css class names with spaces

You should not use spaces in status at all.
Better idea would be to use Choices from django-model-utils
Then you can define the status in your model like this:

STATUS = Choices(
    ('completed', 'completed'),
    ('not_yet_started', 'Not yet started')
)
status =  models.CharField(choices=STATUS, max_length=20)

The first value of the tuples is stored in the database. The second one you can use to display. You can the access it like this

obj.status # gives "not_yet_started"
obj.get_status_display # gives "Not yet stared"   

UPDATE:

If you don't want to / can't change the entries in the database there are two possible solutions.

• Javascript:

  '{{a.status}}'.replace(' ', '_')

• django model property:

  def status_name(self):
return self.status.replace(' ', '_')

Impact on space on class / id

/*not working*/

console.log(document.getElementById("id"));

/*working*/

console.log(document.getElementById("       id"));

/*working*/

console.log(document.getElementsByClassName("class1")[0]);

/*working*/

console.log(document.querySelector('.class1'));

/*working*/

.class1{

color: red;

}

/*working*/

div[id='       id'] { 

  text-align: center;

}

/*not working*/

#id{

background-color: yellow;

}

/*not working*/

#       id{

font-size: 300%;

}

<div class="              class1" id="       id">This is a div</div>

If the html says div id=two words, how do I write the CSS selector in the style sheet?

If it contains spaces, it is not legal HTML. You shouldn't expect this to work. Here is the relevant section of the HTML 4.01 specification.

[EDIT] As others have noted, you can get around this by assigning one or more class names to the div and using a class name to do the selection.

---

Related Topics