Can't figure out basic CSS [duplicate] - css

Question

This question already has answers here:
How do I select an element that has a certain class?
(5 answers)
Closed 6 years ago.
So I have few buttons that are arranged in this fashion:
<button>Home</button>
<button>Blog</button>
<button>Forums</button>
<button>Contact Us</button>
I want to have a "selected" class or ID that changes the background of the selected button.
I tried doing this:
button > .selected {
background: red !important;
}
And changed button in HTML to this:
<button class="selected">Home</button>
It didn't do anything at all, button background stayed the same color. I also tried using ID instead of class to no avail.
How can I solve this task easily?

Answer 1

Use:
button.selected {
background: red !important;
}
For a button with a class (Make sure there's no space between them, or you will be selecting child elements)
You should also be able to remove the !important unless there's actually a good reason to keep it. Since the selector including a class is more specific than a standard selector, it will overwrite the background colour without the use of !important.
The > symbol means a direct child of an element.
Here's a few beginers resources for leaning about CSS selectors:
https://css-tricks.com/how-css-selectors-work/
https://css-tricks.com/child-and-sibling-selectors/

Answer 2

try these code, it will work
button{
background:green;
}
button.selected {
background:red;
}

Answer 3

button:active,button:focus {
background:red;
}
<button>Home</button>
<button>Blog</button>
<button>Forums</button>
<button>Contact Us</button>