Change html svg cricle's fill with css when clicked on

Question

I am using the following svg drawing as a button:

<svg id="button-more-people" style="width: 60px; height: 60px;">
    <circle cx="30" cy="30" r="30" fill="#F44336" id="circle-button-more-people"/>
    <text fill="#ffffff" font-size="45" x="11" y="44" font-family="Verdana">+</text>
</svg>

When the mouse hovers over the circle, I scale the button up through css:

#button {
    transition: 0.3s ease;
}

#button:hover {
    transform: scale(1.2);   
}

What I can't seem to achieve is to change the buttons color when its clicked on. I have tried the following, to no avail:

#button:active ~ circle {
    fill: #D50000;
}

I would prefer if there was a javascript-less solution to this I could use.

Thanks for any help in advance!

Answer 1

The problem is in the selector used for the fill:

#button:active ~ circle {

This is the General Sibling Combinator which in your case matches <circle> tags that are siblings and after the #button, however in your markup <circle> is a child of #button

You can solve this by either using a descendant combinator:

#button:active circle {

Or a child combinator:

#button:active > circle {

Example:

#button-more-people {
  transition: 0.3s ease;
}

#button-more-people:hover {
  transform: scale(1.2);
}

#button-more-people:active circle {
  fill: #D50000;
}

<svg id="button-more-people" style="width: 60px; height: 60px;">
    <circle cx="30" cy="30" r="30" fill="#F44336" id="circle-button-more-people"/>
    <text fill="#ffffff" font-size="45" x="11" y="44" font-family="Verdana">+</text>
</svg>