How to target html element with attribute and its value in css?

Question

I want to target html element with ct:value=" " values to change color of circle.

I can target with below css but y1 value is not fixed so my css will not work but in this case ct:value value is fixed and it will be between 1 to 5 all time. So I have to target ct:value to change color.

I can't change in html file because svg code is dynamic.

.ct-point[y1="140"]{
  background-color: #ff0000;
}

I tried below css but it's not working.

.ct-point[(ct:value)="4"]{
  background-color: yellow;
}
.ct-point[ct:value="2"]{
  background-color: pink;
}

.ct-point {
    background-color: #000000;
    height: 20px;
    width: 20px;
    display: inline-block;
    border-radius: 100%;
}
.ct-point[y1="140"]{
      background-color: #ff0000;
}
.ct-point[ct\:value="4"]{
      background-color: yellow;
}
.ct-point[ct\:value="2"]{
      background-color: pink;
}

<line x1="120.29910714285714" y1="15" x2="120.30910714285714" y2="15" class="ct-point" ct:value="5" ct:meta="Feel brilliant today."></line>
<line x1="190.59821428571428" y1="140" x2="190.60821428571427" y2="140" class="ct-point" ct:value="3" ct:meta="Feeling ok."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="1" ct:meta="bad..."></line>
<line x1="260.89732142857144" y1="77.5" x2="260.90732142857144" y2="77.5" class="ct-point" ct:value="4" ct:meta="pretty"></line>
<line x1="331.19642857142856" y1="15" x2="331.20642857142855" y2="15" class="ct-point" ct:value="5" ct:meta="Today feel brilliant because it&amp;#039;s morning time!"></line>
<line x1="401.49553571428567" y1="77.5" x2="401.50553571428566" y2="77.5" class="ct-point" ct:value="4" ct:meta="Pretty good."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="2" ct:meta="great..."></line>

What is gionkunz.github.com/chartist-js/ct and why do I get a 404 when I try to go to it? — kevin
– kevin, Commented Oct 21, 2022 at 10:05

Robert Longson · Accepted Answer · 2022-10-21 09:48:05Z

1

You should try to avoid : in attribute names, but if you really want to go down that road you'll have to escape them in the CSS selector.

.ct-point {
    background-color: #000000;
    height: 20px;
    width: 20px;
    display: inline-block;
    border-radius: 100%;
}
.ct-point[y1="140"]{
  background-color: #ff0000;
}
.ct-point[ct\:value="4"]{
  background-color: yellow;
}
.ct-point[ct\:value="2"]{
  background-color: pink;
}

<line x1="120.29910714285714" y1="15" x2="120.30910714285714" y2="15" class="ct-point" ct:value="5" ct:meta="Feel brilliant today."></line>
<line x1="190.59821428571428" y1="140" x2="190.60821428571427" y2="140" class="ct-point" ct:value="3" ct:meta="Feeling ok."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="1" ct:meta="bad..."></line>
<line x1="260.89732142857144" y1="77.5" x2="260.90732142857144" y2="77.5" class="ct-point" ct:value="4" ct:meta="pretty"></line>
<line x1="331.19642857142856" y1="15" x2="331.20642857142855" y2="15" class="ct-point" ct:value="5" ct:meta="Today feel brilliant because it&amp;#039;s morning time!"></line>
<line x1="401.49553571428567" y1="77.5" x2="401.50553571428566" y2="77.5" class="ct-point" ct:value="4" ct:meta="Pretty good."></line>
<line x1="471.79464285714283" y1="202.5" x2="471.8046428571428" y2="202.5" class="ct-point" ct:value="2" ct:meta="great..."></line>

answered Oct 21, 2022 at 9:48

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jignesh Panchal Over a year ago

Thanks for you answer.This css work fine here but I don't know why this css is not working in live site in svg.

Collectives™ on Stack Overflow

How to target html element with attribute and its value in css?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related