What's the difference? - CSS Pseudo Selectors By Building A Balance Sheet - Step 30

HTML-CSS
1

The question states that

The span[class~="sr-only"] selector will select any span element whose class includes sr-only . Create that selector, and give it a border property set to 0 .

What’s the difference if I only use the .sr-only selector? How will that affect the CSS?

Edit:
What’s the difference if I use span.sr-only and span[class~="sr-only"]?
Or is it just for learning purposes?

2

In your CSS file
(or
<style>
. . . various definitions . . .
</style>
part of your HTML file), you DEFINE the class - in this case it is called ‘sr-only’.
It will look like:

.sr-only {
    width: 100px;  /* for example */
    color: red;  /* any attributes can be listed on these lines */
    }

In your HTML file, you will USE the class.
You could use it on any element, like a paragraph, for example. It will look like:

<p class="sr-only">Some text</p>

When the page displays, ‘Some text’ will look red and be 100 pixels wide. So if you had a background color or border, you could see the size.

So, to summarise:
The style (css) defines what the classes look like.

In the html, the classes are applied to elements, like h1, p, span, etc. It lets the browser know how to format that element, identified by the class name.

1 Like
3

Thank you for your answer!

I seems that I ask the wrong question, let me rephrase it.

What’s the difference between span.sr-only and span[class~="sr-only"] ?

4

Oh… the span[class~=“sr-only”] is any class containing the word ‘sr-only’.
The sr-only is just their example. Other classes can have other class names, like class="tr-always" or anything you choose.

span.sr-only will not be understood by the browser.

See how I typed the class=“sr-only” . . . this is the only way it will work.

In the css definition, the dot in front of sr-only (.sr-only) tells the css interpreter that this is a class.
If it were an id, it would have a # in front of it.
Like,

#sr-unique

Then you would use it like,

<p id="sr-unique">Some other text</p>

A class can be used on more than one element.
An id can only be used once on a page.
Standard elements, like h1, p, span, etc do not need anything in front. They are defined like,

h2 {
    font-size: 1.2em;
    }

Do you understand the difference? If not, I can try to explain again.

5

How is span.sr-only not be understood by the browser?

Here in this article by MDN web doc,

one of the examples shows an element followed by .class without a space as a working example

6

Ohhh. Right.
That is explaining multiple classes and specific elements using the class definition.

Sorry … I didn’t think of that at the time. My apologies.

So … if a class is used for a paragraph, a header and a span, you would have:

.tr-always {
    color: blue; /* another example */
    }

If you only want the header (h3, for example) to have specific attributes . . .
Then in your definitions (css file or style section) you would have:

h3.tr-always {
    background-color: yellow;
    font-size: 1.8em; /*   */
    }

or whatever you want headers of the tr-always class to look like.
So, a paragraph, unordered list or span with tr-always class will look different to a header with tr-always class (h3 in this example). In this example, all the tr-always elements will have blue text, because the color parameter is not changed in the h3.tr-always definition. But only the tr-always header will have the background and the font size set.

This is in the CSS file or <style> . . . </style> part.

In the HTML part file/part, you would have

<h3 class="tr-always">Title text</h3>
<p>No specific class, just plain paragraph</p>
<ul class="tr-always>
   <li>1</li>
    <li>2</li>
</ul>

Does that clarify it better?

1 Like
7

Yes, thank you for the explanation :slight_smile: happy to see other people’s explanation.

However that does not explain the difference if I use span[style~="sr-only"] or if span.sr-only is used.

Perhaps this specific case is only sued to introduce the ~= part… :thinking:

8

The [attribute~=value] selector is used to select elements with an attribute value containing a specified word .

Other curriculums sometimes describe it differently:
See also:
Attribute selectors - CSS: Cascading Style Sheets | MDN (mozilla.org)

Or search for:
css “class~=”

9

Hmm from what I see in

(I have already posted it above)

that [class~="sr-only"] and .sr-only is that same…

So I guess the tutorial wants to teach about ~= in general.

10

Not quite. the .sr-only refers to that specific class of ‘sr-only’.
But the [class~="sr-only"] refers to any classes with that (sr-only) as part of the class name.

11

This has it all, with examples: (posted above)

Attribute selectors - CSS: Cascading Style Sheets | MDN (mozilla.org)

12

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