CSS: select a class whose name has a space?

Question

I have this D3 code which creates my x axis:

svg.append("g")
  .attr("class", "x axis")
  .call(xAxis)

How do I select my x axis in my css file? I have:

.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

But this would apply to all my axes (both x axis and y axis). How do I select only x axis? I know css selectors can be cascaded, but I'm not sure exactly how to do that...

score 5 · Answer 1 · answered Nov 20 '14 at 04:22

Class names cannot have spaces. you have 2 classes if your class name has a space. Use x-axis for your class name if you would like to reference it.

... none of which are space characters [0]

[0] http://www.w3.org/TR/html5/infrastructure.html#set-of-space-separated-tokens

score 3 · Accepted Answer · answered Nov 20 '14 at 04:38

Technically it is two separate classes, x and axis, but that doesn't mean you can't select and affect only what you want on the x-axis. Cascading selectors looks like this:

.x.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

Isaac · Answer 3 · 2014-11-20T04:36:53.227

0

For any class with a space:

[class*=" "]
{
/* css */
}

For x axis:

[class="x axis"]
{
/* css */
}

An alternative that doesn't use the CSS attribute selector:

.x
{
/* any element with class "x" */
}
.axis
{
/* any element with class "axis" */
}
.x.axis
{
/* any element with classes "x" and "axis"
/* this is what you're after */
}

edited Nov 20 '14 at 04:36

answered Nov 20 '14 at 04:26

Isaac

11,409
5
33
45

2

Whilst this may work, it is a bad idea as `.x` and `.axis` would also be applicable classes. The overwhelming majority of experienced web developers would see any class attributes with one or more spaces as more than one class. – Jon P Nov 20 '14 at 04:30
I know, but OP gets what OP wants. Maybe he's making something that experienced web devs aren't meant to understand? – Isaac Nov 20 '14 at 04:34

score 0 · Answer 4 · answered Nov 20 '14 at 04:30

@self's comment was correct. If you have a space between your class name, you then have two class names.

Your code should look like:

svg.append("g")
  .attr("class", "x-axis")
  .call(xAxis)

CSS:

.x-axis {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

The reason you would use two classes is to change an element. Like this:

$( "#addClass" ).click(function() {
  $( "#box" ).toggleClass("big");
});

.box {
  width: 100px;
  height: 100px;
  background: black;
  transition: all 0.5s;
  }

.big {
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="box" class="box"></div><button id="addClass">Resize the div</button>

I hope this helps you out. If you have additional questions, ask them below.

Happy coding!

score 0 · Answer 5 · edited May 23 '17 at 12:27

Perhaps you are closer than you think. Mutliple classes are seprated by a space. ~~I also think from memory, class names may need to be more than one character.~~ So you could do something like the following

svg.append("g")
  .attr("class", "horizontal axis")
  .call(xAxis)

CSS

.axis  line /*Common stuff for both axis*/
{
      fill: none;
      shape-rendering: crispEdges;
}

.axis.horizontal line /*Specific to horizonal axis*/
{
   stroke: black;
}

.axis.vertical line /*Specific to vertical axis*/
{
   stroke: red;
}

Note: the closest I've been able to find for a source that classes need to be more than one character is: https://stackoverflow.com/a/2192121/4665. It quotes no other sources and .x validates. So feel free to use x and y

CSS: select a class whose name has a space?

5 Answers5