For my pset 8, I'm trying to make my seating chart look nice. I want to stylize the passengers list items, using CSS classes.

For each house, I created classes looking like this. Now I can give passengers that have to go to the same house, the same color/style.

.Adams House
    background-color: #ffffe5;

.Cabot House
    background-color: #ffffe5;

I coded like this, so I can just add the passenger.house value to the html. Instead of making an if-branch for each house.

(var i = 0; i < newchart.length; i++)
    if (newchart[i] == null)
        html += "<li class=\"empty\">Empty Seat</li>";
        html += "<li class=\"" + newchart[i].house + "\">" + newchart[i].name + " to " + newchart[i].house + "</li>";

Thing is, that apparently you cannot have spaces in CSS classes... Is there a way to solve this?

  • So you never thought about a dash or an underscore instead of a space? – kzidane Oct 29 '14 at 13:04
  • Of course I did.. It's just the names the HOUSES array properties have spaces in it. I thought it'd be easy to make css classes conforming to those names... – Jesse Oct 29 '14 at 13:12
  • This might be helpful! – kzidane Oct 29 '14 at 13:27
  • Thanks... Too bad. I think it's just not possible.. Anyway, I worked around it.. :) – Jesse Oct 29 '14 at 13:58

The allowed CSS grammar is documented here. This is the important part:

nmchar      [_a-z0-9-]|{nonascii}|{escape}

This is regular expression syntax, which says that the allowable characters are either underscores, alphanumeric characters, dashes, OR tokens defined as nonascii or escape elsewhere in the grammar.

In theory, the escape definition doesn't disallow whitespace characters as long as they are properly escaped by a backslash. The problem is that you wouldn't be able to actually use this name because HTML allows multiple classes to apply to the same element:

Every HTML element may have a class attribute specified.

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

So when the HTML is parsed, any class name that includes a space would end up being parsed as two different classes. At that point, whether or not it's valid CSS doesn't really matter; it wouldn't be functional in the sense that you couldn't use it in any valid HTML.

There's a lengthy discussion on StackOverflow that addresses essentially the same question.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .