Two questions about the balance sheet/CSS selectors

[bucket]

I apologize in advance if this forum is strictly for debugging. My code is passing fine, but I have a couple of questions:

Firstly: Why does it want me to put

h1 .flex{}

when there is only a single flex in the html code? Why not just .flex{} ?

And secondly: This thing. Just. This thing.

span[class~=“sr-only”] {}

What the Frankenstein is this unholy selector. I spent way too much time trying to parse it and what it’s supposed to be targeting/doing, up to and including changing it from “sr-only” to something else in order to make it visible (in the html too, of course). There was also a lot of googling and some drafting on physical paper. I still don’t get it. I may just be dumb. Am I actually supposed to understand that monstrosity at this point in the course?

[bappyasif]

share that exercise / step link here for more context, thanks

[bucket]

Sorry about the late answer, life happened. It all got explained in later steps. (Don’t know why the exercises are structured like that, but oh well.)

[lasjorg]

The first one is kind of hard to answer without context.

The second is an attribute selector.

Attribute selectors

[attr~=value]

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Edit: @bucket which step is this from?

[bucket]

It’s from step 30.

Way later, in step 56, they reiterate what the class selector we have used before does. I just don’t see the difference between

[class~=“sr-only”] {}

and

.sr-only{}

They seem to be completely equivalent, and I don’t understand what subtleties I’m missing here?

[bbsmooth]

@bucket

They seem to be completely equivalent

I think you are right. The tilde in this instance works with attributes that have a space-separated list of values. It will match if the list includes the value in the selector. I think you would generally use this with custom data attributes:

data-info="one two three"

And then you could do:

[data-info~="two"]

And it would match it because “two” is one of the values in the data-info list. Since the class attribute takes a space separated list of values as well you can also use the tilde for classes. But class is kind of special in that it allows you so use the period to select a class from the class list, a very nice shortcut, so you probably wouldn’t use the tilde for classes and it may even seem odd to use it, as is done in step 30.

I can’t comment on why it was done this way in step 30, and technically there is nothing wrong with it. But it’s probably not something you will see too often with regards to class.

And I could be wrong, there may be some difference that I’m not seeing. Never say never

[lasjorg]

The selector does scope it to a span element but other than that using the class should work the same span.sr-only

I rarely if ever use that attribute selector. I can see it might be handy for web scraping or some other instance where you do not have access to the HTML but have to style it. Other than that, its use cases seem a bit limited.

[bucket]

@lasjorg @bbsmooth Thanks! That’s what I thought, but I’m a beginner, so I was certain I was missing something. It did seem like a clunky solution, because, as you point out, the class selector already exists as a kind of special case. Maybe they’re just trying to get us to think In that case, it worked?

Either way, thanks for your help! I’m gonna conclude that if there is a distinction, it’s not very important and I should probably learn about other things first

Edit: I tried to select both your replies as solutions, but it wouldn’t let me. Sorry, lasjorg, here’s a instead!