CODEWITHSUNDEEP
jquerycss
Martin Schäpker
Martin Schäpker

Reputation: 82

jquery addClass child selector failed

i use this css

fa-info {
  background-color: green;
  font-size: 30px;
}
fa-info .active {
  background-color: black;
  font-size: 25px;
}

with this markup

 <fa-info>test</fa-info>

and this jquery code

$(document).ready(function(){
    $('fa-info').bind('mouseover', function(){
       $(this).addClass('active');
    });
    $('fa-info').bind('mouseout', function(){
        $(this).removeClass('active');
    });
});

dont work

if i change the css code to 

fa-info {
  background-color: green;
  font-size: 30px;
}
.active {
  background-color: black;
  font-size: 25px;
}

this works why?

thanks

Upvotes: 1

Views: 98

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

With the selector:

fa-info .active

you are searching a descendant of a fa-info element with the class .active

If you want to point an element with both the attributes remove the space between them, like:

fa-info.active

Demo: http://jsfiddle.net/8U3rG/

Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

For example, the selector .key selects all elements that have the class name key. The selector p.key selects only <p> elements that have the class name key.

Upvotes: 0

Damien Black
Damien Black

Reputation: 5647

If should be

fa-info.active

No space. This is 'give me a fa-info tag with the class active'

fa-info .active, with a space, means 'give me anything with a active class inside of a fa-info tag'

Upvotes: 0

jfriend00
jfriend00

Reputation: 707238

When you specify a selector like this:

fa-info .active

You are asking for a child of fa-info that has the .active class. That is not the situation you have.

To have the active class on the fa-info object itself, your CSS rule would need to be this:

fa-info.active {
  background-color: black;
  font-size: 25px;
}

With no space between fa-info and .active. That indicates you want them on the same object.

To summarize:

/* CSS rule that targets a child of fa-info with the active class */
fa-info .active {
  background-color: black;
  font-size: 25px;
}

/* CSS rule that targets a fa-info with the active class on the same object */
fa-info.active {
  background-color: black;
  font-size: 25px;
}

Upvotes: 3

Related Questions