Selecting an element by its attribute when it has a colon in its name
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 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.
Answer
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;
}
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM