HTML span class tag

Question

Im trying to understand some HTML/ CSS elements for web scraping. I encountered this tag

<span class="lister-item-index unbold text-primary"> </span>

May I know whether "lister-item-index unbold text-primary" under class are options/ properties for the span tag or it is just a name for the class?

Answer 1

span is just a literal kind of html tag. nothing exotic here. lister-item-index unbold text-primary are css classes. They are used to add some style to the tag.

More on the class attribute:

The class global attribute is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

mdn

More on the class selector:

In an HTML document, CSS class selectors match an element based on the contents of the element's class attribute. The class attribute is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector.

mdn

.blue { color: blue; }

.text-primary { color: green; }

.red-border { border-bottom: 1px red solid; }

<span>test</span>
<br><br>
<span class="blue red-border">test</span>
<br><br>
<span class="blue">test</span>
<br><br>
<span class="text-primary red-border">test</span>

another example:

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>