FAQ: Selectors - Class

This community-built FAQ covers the “Class” exercise from the lesson “Selectors”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise Class

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why does the .title override the h1 selector?

2 Likes

Cause a class selector has an higher “specificity” than a tag selector.

Check this article in MDN: Specificity - CSS: Cascading Style Sheets | MDN.

“Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.”

9 Likes

haha you beat me to it! :stuck_out_tongue:
@danberger7095893850
In short:
tag selector<class<id

:wink:

5 Likes

Thanks for the information

What is the difference between class and id attributes?

2 Likes

“In contrast to class which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id can only have a single value, and only be used once per page.”

1 Like

Is the class attribute only used for CSS or are there other reasons why HTML would need it?

You also can use it to access an element in JavaScript. It’s just a name for an element so you can reference it (in CSS, JavaScript, or some other language).

The method getElementsByClassName() in JavaScript can be used to get an element in a Javascript function.

HTML:
<div class='rectangle'></div>

JavaScript that turns the rectangle element blue:

const rectangle = document.getElementsByClassName('rectangle');
rectangle[0].style.color = 'blue';
2 Likes

why we are using .title ruleset when we can use type selector ruleset?
what is the benefit of using .title ruleset?

Using .title ruleset helps apply a CSS style to multiple elements with only the same class in the HTML code. Using the type selector would apply to all elements with that particular type element (even with a class attribute).

I think I’m experiencing a bug. I’ve had to look at view solution and accept their code, even when our codes are identical. Even when I copy all of their solution for the HTML & CSS page and replace my code, the program says its wrong, but then I click accept their solution and it says its right…

1 Like

sometimes it seems like using inline css is easier than adding that particular rule to an external style sheet. I know there are reasons why a style sheet is preferred, but I guess for one or two items inline seems they way to go. am I wrong or is that just my beginner’s inexperience talking ?

  • Quick Overrides: When you need to make a temporary or one-off change.
  • Email Templates: Inline CSS is often used in email templates due to inconsistent CSS support across email clients.

Other than the reasons above, I don’t see a necessity in using inline-styles. Its disadvantages somewhat outweighs the pros as it creates redundancy and does not follow the SOC (Separation of Concern) principle.

1 Like

cool, thanks for the input. Thats what I was thinking also but im new so hearing from someone with more experience ingrains the proper practice more so in my mind.

1 Like