Consider the CSS selection I have here:

/

/* This works:
 #myChart .ct-series-b .ct-bar { 
 */


/* This does not (chromium, glnxa64) */
['ct\:series-name'='second'] .ct-bar {
  /* Colour of your points */
  stroke: black;
  /* Size of your points */
  stroke-width: 20px;
  /* Make your points appear as squares */
  stroke-linecap: round;
}

This is a sample chart using /

I am trying to select the ct-bar elements:

The colon appears to be throwing off the selector. I have tried various escape approaches :, \3A with a space after, single and double quotes - no luck.

Consider the CSS selection I have here:

http://jsfiddle.net/dx8w6b64/

/* This works:
 #myChart .ct-series-b .ct-bar { 
 */


/* This does not (chromium, glnxa64) */
['ct\:series-name'='second'] .ct-bar {
  /* Colour of your points */
  stroke: black;
  /* Size of your points */
  stroke-width: 20px;
  /* Make your points appear as squares */
  stroke-linecap: round;
}

This is a sample chart using https://gionkunz.github.io/chartist-js/

I am trying to select the ct-bar elements:

The colon appears to be throwing off the selector. I have tried various escape approaches :, \3A with a space after, single and double quotes - no luck.

• javascript
• css
• svg
• css-selectors
• chartist.js

• don't put the attribute in quotes at all, i.e. [ct\:series-name='second'] (not tested but I just read about this somewhere yesterday) – Jaromanda X Commented Dec 24, 2015 at 2:14
• That's kinda odd. [ct\:series-name="second"] works here, but not here. In the DOM, the attribute is displayed as ct:series-name="second", but when you inspect the actual HTML, the attribute is series-name="second" (for me at least in the Chrome console). – Josh Crozier Commented Dec 24, 2015 at 2:19
• 1 Does nobody here know XML? That is very clearly a namespace prefix - and we're dealing with SVG, an XML-based markup language here, not HTML. – BoltClock Commented Dec 24, 2015 at 5:51
• 1 @BoltClock: It took sometime to figure that out but I did eventually :D – Harry Commented Dec 24, 2015 at 5:52
• 1 Possible duplicate of How to use CSS attribute selector for an SVG element with namespaced attribute href? – Kaiido Commented Dec 25, 2015 at 0:31

3 Answers 3

I've never used Chartist, but judging by the ct: namespace prefix, it appears to be an extension to SVG markup. So you're no longer really dealing with HTML here; you're dealing with XML, because SVG is an XML-based markup language.

Escaping the colon or otherwise specifying it as part of the attribute name doesn't work because the ct: no longer becomes part of the attribute name when it's treated like a namespace prefix (which is what it is). In a regular HTML document, an attribute name like ct:series-name would indeed include the prefix, because namespace prefixes only have special meaning in XML, not in HTML.

Anyway, the web inspector shows the following XML for your svg start tag:

<svg class="ct-chart-bar" xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" style="width: 100%; height: 100%;">

What you need to do is reflect this XML namespace in your CSS using a @namespace rule:

@namespace ct 'http://gionkunz.github.com/chartist-js/ct';

And, rather than escaping the colon, use a pipe to indicate a namespace prefix:

[ct|series-name='second'] .ct-bar {
  stroke: black;
  stroke-width: 20px;
  stroke-linecap: round;
}

And it should work as expected.

You shouldn't quote the attribute name, otherwise you are correctly escaping the colon.

[ct\:series-name='second'] 

See https://msdn.microsoft.com/en-us/library/ms762307(v=vs.85).aspx

It seems like the namespace selector would work only when the namespace is defined within the CSS itself in the below format:

@namespace <namespace-prefix>? [ <string> | <uri> ];

From Selectors Spec: ^{emphasis is mine}

The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|).

An attribute selector with an attribute name containing a namespace prefix that has not been previously declared is an invalid selector.

Once we add the namespace definition for ct into the CSS, the namespace based selector works as expected. The namespace's URI was taken from the <svg> tag that was generated.

var data = {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [{
    name: 'first',
    data: [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  }, {
    name: 'second',
    data: [3, 4, 2, 6, 3, 2, 1, 4, 6, 2]
  }]
};

var options = {
  high: 10,
  low: -10,
  onlyInteger: true
};

new Chartist.Bar('.ct-chart', data, options);

@namespace ct url(http://gionkunz.github.com/chartist-js/ct);
[ct|series-name="second"] .ct-bar {
  stroke: black !important; /* without important it doesn't seem to work in snippet but works in fiddle */
  stroke-width: 20px;
  stroke-linecap: round;
}

<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" />
<div id="myChart" class="ct-chart" style="height:400px"></div>

Fiddle Demo.

Note: The below selector doesn't work even after the namespace definition is added. The reason for this is provided by BoltClock in his answer.

[ct\:series-name="second"] .ct-bar {}