[FAQ] Common Problems for "Make an Interactive Website: News Reader"

This FAQ is for Make an Interactive Website: News Reader.


Problems discussed:

Why do I have a dot (.) before a class name when selecting an element, but not when adding or removing it’s class?

Why am I told to select the <div> with the “description” class when there is only a <div> with the “description row” class?


We hope the answers to these common problems will help all of you with your coding. If you see any questions in this category that can be answered by this FAQ, please link the person needing help over here.

Thanks,

The Codecademy Moderators


If we see a post worthy of being added to this or any other FAQ we may send you a PM to ask you to repost your answer in one of the FAQs.

This topic is not for questions, if your problem is still not answered after reading through all these Common Problem then please create a new topic.

6 Likes

Why do I have a dot (.) before a class name when selecting an element, but not when adding or removing it’s class?

When you select an HTML element, there are three main ways you can do that. By it’s tag name (tag), by one of it’s classes (.class), or by it’s id (#id). So, with these elements:

<div></div>
<div class="example-class"></div>
<div id="example-id"></div>

(the class or id name could be anything you want it to be)
you would select each element like this with jQuery, respectively:

$('div')
$('.example-class')
$('#example-id')

The character in front of your selection (nothing, ., or #) represents what selector it is. This is necessary because you might have a class name that’s the same as a tag name, for some reason.

However, addClass(), removeClass(), and toggleClass() don’t need that distinction. They know they’re dealing with a class, so the distinction between the various selectors isn’t necessary.


Additional reading

https://api.jquery.com/addClass
https://api.jquery.com/removeClass
https://api.jquery.com/toggleClass

8 Likes

Why am I told to select the <div> with the description class when there is only a <div> with the description row class?

In the class attribute on an HTML element, a space represents two different classes. So here:

<div class="description row">
  <!-- ... -->
</div>

the <div> has two classes, description and row. Not one class called “description row”.

You can have as many classes as you like (within reason) on an element, as long as you separate each different class name by a space.


Additional Reading

2 Likes