Why would I need to use to an element instead of a class?

In this exercise.

What is the case in which I need to use an ID to an element instead of simply using a specific class for that element?

I think it could be a small oversight in the lesson preparation. It makes sense if before we add the id attribute, the element looks like this…

<h1 class="title cursive uppercase">Top Vacation Spots</h1>

Notice I changed the ‘capitalize’ to ‘uppercase’. Now run the code.

Okay, add the CSS, (it can go on the bottom of the style sheet)

#article-title {
  font-family: cursive;
  text-transform: capitalize;
}

and insert the attribute so the element now looks like this…

<h1 id="article-title" class="title cursive uppercase">Top Vacation Spots</h1>

Now we can see how because of greater specificity, the capitalize property overrides the ‘uppercase’ class.

Thanks for your reply.

It’s still not clear for me why do we have to create an id instead of creating another class.

For instance:

<h1 class="title cursive uppercase">Top Vacation Spots</h1>

We want to change it to capitalize? why not do this:

<h1 class="title cursive capitalize">Top Vacation Spots</h1>

where we define:

.capitalize {
text-transform: capitalize;
}

They are two ways to achieve the same result. However, there are numerous situations where an id is so much better to use because of its specificity.

For example:

Say you have 3 divs with a background image where everything is the same except for the image source. You could then assign those divs with the same class to get the display settings, but make the image source id dependent.

<div id="image1" class="background-image">
    ...
</div>

<div id="image2" class="background-image">
   ...
</div>

<div id="image3" class="background-image">
   ...
</div>
.background-image {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center; 
}

#image1 {
    background-image: url("img_tree.gif");
}

#image2 {
    background-image: url("img_rock.gif");
}

#image3 {
    background-image: url("img_mountain.gif");
}

Thanks for the reply!

I’m sorry if I’m asking too much about this but in your example why can’t we write it like this:

<div class="background-image image1">
    ...
</div>

<div class="background-image image2">
   ...
</div>

<div class="background-image image2">
   ...
</div>

And then specify the image source in each class:

.background-image {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center; 
}

.image1 {
    background-image: url("img_tree.gif");
}

.image2 {
    background-image: url("img_rock.gif");
}

.image3 {
    background-image: url("img_mountain.gif");
}

What’s the case in which specificity is crucially needed?

In cases where we need a specific image that is not going to be used again on the same page then id is ideal for the usage.

<div id="image1" class="bg">
    ...
</div>
.bg {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
}
#image1 {
  backgound-image: url(img_tree.gif)
}
#image2 {
  backgound-image: url(img_rock.gif)
}
#image3 {
  backgound-image: url(img_mountain.gif)
}

Sure you can do it like that, same result. But is not the most attractive solution.

Using a class implies that there are multiple of the same elements or multiple elements that will need the same styling. If there is code that you only want applied to a single item, use an ID tag.

Aids in readability big time and might save you a lot of time later on when building in animations using for example Javascript.

I got it!

Thanks a lot for your response.

1 Like