When to use the css element/class selector in javascript?

Question

I'm currently working on the codecademy course on building an interactive website and I stumbled upon an ambiguity concerning the use of the elemement/class selection of the css elements.

javascript:

var main = function() {

    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
    });

}; 

css:

.current .item {
  background: rgba(206,220,206,.9);
}

Why do I have to use the element selector 'current' instead of the class selector '.current' in line 4? Is there any rule behind it or just a specification of jquery?

Answer 1

Simply because the name of the class is current not .current, and in

$('.article').removeClass('current');

current is not any selector but just a classname which you want to remove, instead the selector is .article.

You are thinking that we are using element selector instead of class selector. But you are wrong. Do you see the word Class in removeClass and addClass ? It means you are passing class selector, not element selector as an argument.

Now you may ask why don't you see dot with current? Because classes are specified using dot. Actually we have already specified that we are passing Class Selector, as you can see word "Class" in removeClass and addClass .

Answer 2

as per docs addClass():

Adds the specified class(es) to each of the set of matched elements.

Hence, you need to pass the classname/names as parameter and not class selector built out of it.