Introducing the CSS id selector

Contributors
1

Hey all, as far as I can tell, the CSS id selector is first introduced in step 8 of the accessibility quiz. I searched the previous courses and couldn’t find it in any of those. Does anybody know if I’m missing it and it is introduced before step 8?

The reason I ask is because step 8 instructs the user to use the id as the selector but it doesn’t tell them how to do that. The only way they find out is to get it wrong and then the hint will give them the correct selector. Personally, I don’t think this is the best way to introduce a new selector and I was thinking of opening an issue about it, but I wanted to make sure that accessibility quiz step 8 is really the first time the id selector is used, or perhaps I missed it in a previous course.

1 Like
2

Actually, step 21 of the CSS Flexbox Photo Gallery project shows using an id selector for some reason, even though the previous steps make no mention of adding it. It just magically appears in step 21’s CSS and in step 21’s HTML, the class="gallery" is no longer present and is replaced with id="gallery" without any previous instruction to change it from what I can see.

3

Hmm, I’m not seeing id="gallery" for any element in step 21. I’ve reset the step and cleared my cache a dozen times. And are you saying you are seeing an id selector in the CSS as well? Because that’s the one I am really concerned about.

4

image
image1123×743 156 KB

I reset the step also, but this is what I see.

EDIT: After clearing cache, I do not see this anymore. They really should have cache busting implemented for the curriculum as it can change often.

1 Like
5

Honestly, the concept of using an id selector should be introduced way sooner in the curriculum. It should also be mentioned when introducing it, that it is to be used sparingly due to the specificity of the selector.

6

Agreed. I was very surprised when I figured out that the first time the CSS id selector is used is the accessibility quiz.

7

The attribute is introduced in the first project, but not as a CSS selector.

Even though I’m against using ids for CSS I do agree it should be introduced sooner. Maybe we can do it in the “Building a Cafe Menu” for the footer element?

8

I think I’m pretty certain now that the first use of the CSS id selector is step 8 of the accessibility quiz. Whether we want to explain it there or introduce it in an earlier course I’ll leave up to the hive mind to decide. But I am going to open an issue about this so that we can discuss it more there.

Thank you both for your feedback.

P.S. Done. Issue 51319.

9

Basically, the ID selector has 1. symbol (#)
2. Uniquely identified
3. Use once in the HTML (For unique case style)
In CSS, how it is used →
#logo{
min-width: 250px;
width: max(100px, 18vw);
}
In HTML →
first-image

Note: The “img” element is a self-closing tag.