Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 45

The step states, " Before you start diving in to the table itself, your span elements are currently bolded." However, as far as I can see, only span elements with an id of “years” and any class are explicitly set to bold. Entering the code requested works, but why are the span elements already bold? I went back and looked at some of the previous steps, and the only answer that makes sense is that the th element is automatically bold. Is that true?

Secondarily, why doesn’t the code written in step 45 overwrite the instructions in #years span[class]? It is a span, and those elements do not have the class “sr-only”. More searching. Is it because that code uses an id selector and this takes precedence?

Please post a link to the challenge you are in.

CSS Pseudo Selectors - Step 45

Actually the code says this

#years span[class]

And that means that all span elements who are -descendants- of the element whose id is equals years will be selected (and that have a class attribute).

As for this

span:not(.sr-only)

This targets all spans that do not belong to the sr-only class.

So if a span is a descendent of #years and has a class and it was initially told to be bold but it also belongs to this selector for spans that are not sr-only then it will become a normal font.

Does that make sense?

1 Like

Those weren’t my questions. I understand the code. I researched around and found the answers to my questions.

My confusion was that there are other span elements that are bold, but they were never explicitly made bold. Looking back at the steps and doing some research, I see that the th element defaults to bold, hence the need for the normal formatting statement in span:not(.sr-only). That formatting would also theoretically apply to the #years span[class] elements, but it doesn’t affect them because that selector targets an ID which has a higher priority than a selector that targets a class.

But they were.
My point in the previous post was to explain how.

These selected spans are all made bold through the font weight property.
(I can’t easily quote that here because the css code wasn’t posted in your original post but if you look for the #years span[class] selector I was explaining earlier, you can see the setting to bold there)

I found this post from the same question, why span:not(sr-only) doesn’t affect #years span[class] and remove bold from it?

i try your solution, but with some tweaks, i changed #years id to .years class, and the same thing happened (other things too, but not relevant for font-weight), now .years span[class] has stay bold even it’s not id any more

.years span[class] {
  font-weight: bold;
  width: 4.5rem;
  text-align: right;
}

span:not(.sr-only) {
    font-weight: normal;
}

specificity calculator wasn’t any help, but i found if you add important, it will finally override .years span[class]

span:not(.sr-only) {
    font-weight: normal !important;
}

Except they weren’t. I didn’t post the code, but I posted the link to the step, so I figured you’d look at the code.

<div id="years" aria-hidden="true"> <span class="year">2019</span> <span class="year">2020</span> <span class="year">2021</span> </div>

I don’t know how to link the code so that it is better formatted, but that is the entirety of the #years div and what was made bold in the previous step. My problem had nothing to do with that but rather with large portions of code which were also bold, portions that I discovered were bold from the moment I typed them, long before I had started on the CSS.

This is the answer to my question. I can’t help but feel that you didn’t actually read my comment but assumed that I was making a very silly, simple mistake and continued with your original explanation. The elements that the span:not(.sr-only) code is targeting is these th elements in this current step.

My other original question regarding why span:not(.sr-only) didn’t affect the items in the #years div was also resolved, again by my own research into CSS precedence.

I’m not 100% sure of your question or confusion (maybe there is none?), but I’ll try to clarify the specificity. The #years span[class] has a precedence of 1-1-1 (ID-class-element) while for span:not(.sr-only), it is 0-1-1. This means that the #years span[class] CSS will be applied over the other.

As you can see, the .years span[class] has a precedence of 0-2-1 versus the same 0-1-1. Again, it will take precedence. Adding !important to a line will override all other specificity and make that code take precedence, regardless of how specific or general your CSS.

For specificity, the selector with the greater value in the farthest left column wins no matter what the values are in the other columns. For example, 1-0-0 takes precedence over 0-2-4. Likewise, 1-1-1 takes precedence over 1-0-3.

I hope all of this is clear. Sorry if I misunderstood your post and you understood all of it already :grinning:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.