How do I target each circle within svg using css? - css

Question

I have this
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
How can I style each circle using css? Thank you.

Answer 1

If you know that the SVG markup won't change, then this will suffice:
.wheel * {
// CSS here
}
Otherwise, give the circles a class and write like:
.wheel .wheel-circle {
// CSS here
}
If you mean each circle needs different styles then simply:
.wheel #wheel-circle-1 {
// CSS here
}
.wheel #wheel-circle-2 {
// CSS here
}

Answer 2

Method 1:
The best way would be to add an id to each circle:
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle id="innerCircle" fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle id="outerCircle" stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
And then just target that.
#innerCircle {
fill: red;
}
#outerCircle {
stroke: blue;
}
Method 2:
But if this is not desirable, try using the nth-child selector on the parent:
.wheel:nth-child(1) {
fill: red;
}
.wheel:nth-child(2) {
stroke: blue;
}
I hope this helps!