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

HTML-CSS
1

Tell us what’s happening:

Hello. Why is this selector:
#years span[class]

and not:
span[class~=“#years”]

like the sr-only one earlier ?

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 43

Link to the challenge:

2

hi there, what does “sr-only” mean?

3

It means screen-readers only

4

thx. I guess you are asking about something you learned in an earlier step? Do you recall which one?

5

this one says:
select all span elements who have a class attribute (of any kind) and who are inside of #years element (an element whose id is years)
so all of the following spans would be selected:

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

While this one says:
Select all spans who have a class attribute which includes #years
I don’t think this would select anything in the index.html right now.

6

Hi, thanks for your response. So I do understand the instructions, I just don’t understand why the selector is written the way it is. Earlier, we were asked to create a selector for span “sr-only”. It was written like this: span [class~=“sr-only”]. But then for the next span selector, the one for years, we were told to write it like this: #years span[class]. I don’t understand why the format for the two isn’t the same.

7

I feel that maybe I am not getting the heart of your question yet. If the question is “why this vs that”, there is no specific reason to use one selector over another in general other than what is convenient.
I would guess the course is trying to teach different ways of selecting elements, but that’s just a guess based on the title of the course “Learn More About CSS Psuedo Selectors”.

I hope this answers the intent of the question.

8

Because the instructions are asking you to target any span with a class attribute inside the #years div. The first one does that. The second one does not. The second one targets any span with a class that includes the string “#years”.

1 Like
9

Thank you so much! That was really stumping me, I appreciate it

11

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