How can I change color of selected option in Sidebar using CSS?

Question

I'm having trouble figuring out how to change the color of the selected option in a sidebar. For example, I have 4 options, and I click the first option, I want the first option in the sidebar to have a white background color all the time. All I have now is just a hover option, where it changes the background color. Can I have this with only using CSS HTML? From my research, I saw a few in JavaScripts and PHP, but wonder if I can do this using only CSS HTML. Below is my current code:

.flexContainer {
    display: flex;
}

.flexContainer > div {
    margin: 10px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
}

.sidebarContainer {
    flex-shrink: 1;
}

.sidebar {
    width: 200px;
    background-color: #dd1d5e;
    overflow: auto;
    border-radius: 30px;
}

.sidebar a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
}

.sidebar a:hover:not(.active) {
    background-color: #ffffff;
    color: #dd1d5e;
}

<div class="flexContainer">
            <div class="sidebarContainer">
                <div class="sidebar">
                    <a href="category.php">Holiday</a>
                    <a href="category.php">Vegetarian</a>
                    <a href="category.php">Dessert</a>
                    <a href="category.php">Cultural Cuisine</a>
                </div>
            </div>
</div>

Answer 1

If you would like to make it work in standalone HTML without PHP. Firstly, you should have 4 HTML files, and each file should be a different name, say cat-holiday.htm, cat-vegetarian.htm, cat-dessert.htm and cat-cultural.htm.

After that, each HTML file has a ONE <a> contains a special CSS classname, say: .selected. Sample of cat-holiday.htm

            <div class="sidebar">
                <a href="category.php" class="selected">Holiday</a>
                <a href="category.php">Vegetarian</a>
                <a href="category.php">Dessert</a>
                <a href="category.php">Cultural Cuisine</a>
            </div>

Finally, you could add a corresponding code to your CSS file.

.sidebar a.selected {
    background-color: #ff0000;
    color: #00ffff;
}