CODEWITHSUNDEEP
htmlcsscss-selectors
user1117617
user1117617

Reputation:

Why does class not update ID?

I have an ID which shows an image at the top of my site

<div id="Introduction">

When I click the <div> it toggles the class active which works.

However the background image does not seem to change - can anybody tell me why?

I know the class is being added because I can see by inspecting the element.

#Introduction
{
    width: 95%;
    height: 280px;
    padding-top: 85px;  
    padding-left: 5%;
    background-image: url('background1.jpg');
    background-size: cover;                  
    background-position: center center; 
    transition: all 1s ease-in-out; 
 }

#Introduction .active
{
    background-image: url('background2.jpg');
}

Upvotes: 2

Views: 50

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99544

Just remove the white space between #Introduction .active. Like #Introduction.active.

An space between two simple selectors A B is called descendant combinator, which would select all Bs that are descendants of As.

In this particular instance, .active class is added to the div having #Introduction ID as well, hence you should use those two selectors without any combinators (spaces, > greater-than sign, etc.).

Upvotes: 2

Scimonster
Scimonster

Reputation: 33409

You have an error in your selector, you're checking for .active that is a descendant of #Introduction. It should be #Introduction.active, without a space.

Upvotes: 2

Related Questions