FAQ: CSS Setup and Selectors - Review CSS Selectors

This community-built FAQ covers the “Review CSS Selectors” exercise from the lesson “CSS Setup and Selectors”.

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

Web Development

Learn CSS

FAQs on the exercise Review CSS Selectors

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!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

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!

Can we use publish_time instead of publish-time for a selector in CSS? Is it Mandatory to use publish-time

1 Like

‘‘Classes can be reusable, while IDs can only be used once.’’
i dont understand this

There may be 30 students in a classroom, but each have a unique id, else how would we know who’s grade it is posted on the exam board. There are no names on the list, only numbers, and only the student knows their own number (besides the examiner).

An ID is very specific, and pertains to just one thing. It can be small or it can be large, but it is most definitely singular. There can be only one.

Classes on the other hand are nebulous and ubiquitous. They are everywhere and can pertain to all manner of objects. That’s why they are re-usable.

3 Likes

Is it possible to create a selector chain with an id included?

e.g. #myid, .class {
color: teal;
}

also, is there a limit to how many selectors can be included in a chain?

What you have there is not a chain, but a selector list. Each selector is treated independently.

A chain would result in a single selector.

#myid.class {}

That selector will target only the id="myid" class="class" element. It would be rather moot, though, since the id is so unique and specific.

Now if we used a descendant selector,

#myid .class

Then only those child elements of #myid with the class, class would be targeted.

2 Likes

What’s the significance (if any) of the different colours in code in CSS?

If you are referring to the letter color in the editor, that is called syntax highlighting and helps to distinguish different aspects of the code. Once we get used to what colors appear, we can spot errors when the colors don’t seem right. Things like missing quotes or missing curly braces, or other syntax errors are usually the problem. Highlighting helps us zero in on errors.

1 Like

Is there any “convention” about ordering all the styles in my CSS sheet? In terms of order and clarity code, is there any rule or advice?

(I assume that the hierarchy in styles is defined by the specificity (covered in chapters 11, 14 and 15 of this lesson) and the order as they appear in CSS sheet doesn’t matter)

Thank you!

Yes, most definitely. Selector rules can be overridden by rules that appear later in the style sheet’s written order. This is a fundamental concept in CSS and well worth taking the time to explore further, imho.


Take for example the anchor element, which has pseudo-class selectors in its repertoire.

a {}
a:link {}
a:visited {}
a:hover {}
a:focus {}
a:active {}

The order in which we write these selectors will have a definite bearing on whether they have any influence, let alone the affect we expect. We’re going to use all of them, so best get the order that we can expect the best result from, which is the above. Mind, we can switch :hover and :focus around since they are independent.

If these pseudo-classes are foreign, then do read up on them. It’s a brief learning opportunity that won’t take much of your time and will still in your lexicon for all time.

Briefly, I’ve defined the generic selector first so it has least specificity. However, I give it all the properties relating to style so it becomes the basic template for that element. :link let’s me define things like color and text-decoration; :visited let’s me override the color and/or text-decoration (for instance why underline a link we’ve already visited, a visual clue without even changing color, though color is a better one); :hover and :focus are reason again to change color and/or outline (default for focus) and/or background, border, etc. We should not change font-size or font-weight since that causes jumping motion that is disturbing to some users. Ditto with alignment. Color change and text-decoration are the best signals to give the user.

:active is for when the user has depressed the mouse button or a keyboard user has pressed ‘Enter’. We can leave the link in view with a different color to give a signal of, ‘this is where we are.’

In order for any of this to work we need the written order as suggested above.

Now back to the OP, it is strongly advisable to dig into CSS just as a read, without clacking any keys. Just read, reason, reread, and store it away. Once turning to practical usage a lot more will make sense in a viable way. Read, read, read.

Learn why we write selector rules with the least specificity possible. I almost challenge one to do that just for the exercise. CSS is so beautiful, and so pliable. There is good reason it has been a spec for decades past, and is certain to be in good stead for decades to come. Learn the whys and wherefores of this bold statement. Then you begin to understand CSS and take command of it. It is, after all a declarative language, not an imperative one.


Actually, post Level II all elements have one pseudo-class, :hover. We can hover on any element, not just a link.

Hello MTF and thank you very, very much!

I appreciate a lot all your explanation, I didn’t know that the order in a CSS matters. Is that “override by order behaviour” depending of the specificity? I assume that if it appears a more specific rule after a less one, it will compute the specificiest, not the latest. Is it correctly?

I think it’s better if I ask you by this example…

<!-- In html file -->
<p>Vivamus sit amet euismod tellus. Etiam eu diam vehicula, ultrices magna et, aliquet quam. </p>
<p class="highlightInfo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac elit in lorem luctus pulvinar. Phasellus vulputate felis ut nisl vehicula sollicitudin eget vel purus.</p>
<p>Aliquam in diam sodales, egestas massa vel, auctor neque. Integer dolor odio, lobortis nec sagittis ut, bibendum ac felis.</p>
/* In css file (in this order!) */

.highlightInfo{
    background-color: darkgray;
    color: white;
    font-weight: bold;
}
    
p{
    background-color: lightgray;
}

In this example, in my 1st and 3rd paragraf it will compute p{} rule and the second on will compute the rule .highlightInfo{}. This is because his specificity and doesn’t matter the order of the rules in the css file. So… what you told me about being carefully about ordering is only when the rules are same specificity, isn’t it?

Assuming all of that, I still have doubts about ordering…

MY QUESTION: Which is the best way yo order all my rules in the CSS file?

I’ve seen some examples where they describe first the tag rules, then the classes and at the end the id rules. Or it’s a better idea to order alphabetically? Or you just go adding them one after another while you need to describe them?

Thank you very much!!!

Related with all of this, I’ve found this interesting article: The Definitive Guide to CSS Styling Order

Correct. Higher specificity trumps order. Same specificity is trumped by order.

Specificity aside, the best order is the one that is easiest to maintain and read. I like to work from least to highest specificity, so type, pseudo-type, type combinator, class, pseudo-class, id. However, it is up to you.

What if I use same css style twice?
For example,

p {
font-family: Arial;
}

p{
font-family: Georgia;
}

Then, what would p look like?

It would look the same as if the two properties were combined into one selector rule. We need to take care that we don’t write CSS like above else it will be difficult to maintain.

Thank you, so the font would appear as Georgia(because it is written later)?

Yes. As these two CSS rules have the same specificity, the one closest to the bottom will get applied