CODEWITHSUNDEEP
csscss-selectors
KJS
KJS

Reputation: 1214

CSS active with ID and CLASS

How do I code this CSS using class="active" so that the background will show below it? Using a different color on .active, so to speak (not :hover).

<a href="[url]" id="curs_section" class="active">kids</a>

My attempt:

a#curs_section .active  {
    background-color: #66a7eb; 
    color: #333; 
}

Upvotes: 2

Views: 7701

Answers (2)

PSL
PSL

Reputation: 123739

You should not have space before .active as it is class on the anchor itself. a#curs_section .active means element with class active which is a descendant of a#curs_section, hence your style was not getting applied.

a#curs_section.active  {
    background-color: #66a7eb; 
    color: #333; 
}

Upvotes: 6

Marc B
Marc B

Reputation: 360572

take out the space:

a#curs_section .active  {
              ^---

with the space, it's an <a> element with curs_section ID, followed by some OTHER element with a .active class.

Without the space:

a#curs_section.active  {

it's an <a> which has id curs_section AND the .active class.

Upvotes: 5

Related Questions