javascript - CSS: select a class whose name has a space? - Stack Overflow

admin管理员组

文章数量:1414908

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

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

• javascript
• css
• d3.js
• selector

Share Improve this question Follow asked Nov 20, 2014 at 4:18 CherryQuCherryQu 3,39399 gold badges4242 silver badges6666 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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/TR/html5/infrastructure.html#set-of-space-separated-tokens

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;
}

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 */
}

@self's ment 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./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!

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./a/2192121/4665. It quotes no other sources and .x validates. So feel free to use x and y

本文标签： javascriptCSS select a class whose name has a spaceStack Overflow