How to change "element.style" on icon after it is transformed in css?

Question

I want to change the element.style of an icon. I want to change the color of the icon so that when it's being pressed it's a different color than the one now. But i don't have access to the html, so I want to do this in css.

this is the icon's html normally:

<span style="color:#000" class="icon-visible list_post_visible" aria-hidden="true"></span>

--css:

element.style {
color: rgb(0, 0, 0);
}
.story ul li .info .icon-visible {
position: absolute;
right: 8px;
bottom: 4px;
font-size: 19px;
cursor: pointer;
}

this is the icon's html when clicked:

<span style="color: rgb(51, 161, 201);" class="icon-visible list_post_visible" aria-hidden="true"></span>

--css:

element.style {
color: rgb(51, 161, 201);
}
.story ul li .info .icon-visible {
position: absolute;
right: 8px;
bottom: 4px;
font-size: 19px;
cursor: pointer;
}

i want to change color: rgb(51, 161, 201) to #ffc600 in css when it is clicked.

Answer 1

EDIT

For test purposes, try this CSS:

.story ul li .info .icon-visible {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 19px;
    cursor: pointer;
}

.story ul li .info .icon-visible:active {
    color: #ffc600 !important;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
}

---

Use CSS pseudo-class :active

.story ul li .info .icon-visible:active {
    color: #ffc600;
}

-

Your full CSS would be:

.story ul li .info .icon-visible {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 19px;
    cursor: pointer;
}

.story ul li .info .icon-visible:active {
    color: #ffc600;
}