CODEWITHSUNDEEP
csscss-selectors
jhamm
jhamm

Reputation: 25032

How do I select an element in the DOM using an attribute name that contains a colon?

I am using the library Chartist, and it is adding an attribute to some of the elements of the DOM named ct:value. For example:

<line y1="122.6875" y2="122.6875" x1="242.33333333333334" x2="262.06666666666666" class="ct-bar" ct:value="1"></line>

I want to do some selective styling depending on what the value of ct:value is. How would I select that using a CSS selector?

Upvotes: 3

Views: 111

Answers (1)

Shaggy
Shaggy

Reputation: 6796

You would use an attribute selector. However, as the colon is a reserved character in CSS (for pseudo-classes, etc.), it would need to be escaped. In CSS, this is done with a backslash: \.

Example

*{box-sizing:border-box;font-family:sans-serif;}
p{
    border:1px solid #000;
    padding:5px;
}
[ct\:value]{
    background:#ccc;
}
[ct\:value="1"]{
    color:red;
}
[ct\:value="2"]{
    color:green;
}
[ct\:value="3"]{
    color:blue;
}
<p>Zero</p>
<p ct:value="1">One</p>
<p ct:value="2">Two</p>
<p ct:value="3">Three</p>

Upvotes: 6

Related Questions