Difference between .class selector and [attribute~="value"]

Hello everyone, thank you for taking the time to help me.

In Step 30 of the Responsive Web Design’s Balance Sheet lesson, it is asked that I create a span[class~=“sr-only”] selector on CSS. However, I’m not really understanding the usage of it.

What would be the difference between:

span[class~="sr-only"] {
  border: 0;


.sr-only {
  border: 0;

Thanks in advance for answering my noob question. 

Hello and welcome.

It only applies to all span that includes this class.

It applies to all elements with this class.

(and don´t worry. There isn´t noob asks. All are interesting)

I hope I can help you.


1 Like

I see. Thank you for your explanation.

I checked it before, but I couldn’t reply thanking you.

I really appreciate it!

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