Is the CSS [attribute="value"] Selector unnecessary? [duplicate] - html

Question

This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 3 years ago.
I'm taking one of the edX classes on CSS and they've included:
[class*='example'] { background-color: orange; }
in the CSS stylesheet. Not familiar with that type of an attribute, so I looked it up. Essentially it just adds a style to anything using a specific class [(or id), depending on the specific attribute]. Why wouldn't you just add:
background-color: orange;
to the appropriate class, or id, and be done with it? Is there a significant purpose to this type of attribute that I'm missing?

Answer 1

The * in [class*='example'] is a selector that retrieves all elements that contains example in the class-name and not just elements with the class-name example.
So [class*='example'] will target all of the following:
<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>
Whereas .example or [class='example'] will only target the second element <div class="example"></div> from the above three.
Other attribute selectors in CSS includes the:
~ selector: This selector retrieves all elements whose targeted attribute's value contains the exact queried value. This selector can include multiple values in the form of a whitespace-separated list of words.
| selector: This selector retrieves all elements whose targeted attribute's value is exactly the queried value or begins with queried value immediately followed by a hyphen.
^ selector: This selector retrieves all elements whose targeted attribute's value starts with the queried value.
$ selector: This selector retrieves all elements whose targeted attribute's value ends with the queried value.
Check and run the following Code Snippet for a practical example and explanation in the code comments on how each of the above selector works:
/* all elements whose abc value contains "ment" */
div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */
div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */
div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */
div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */
div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }
<div abc="element-1">Hello World!</div>
<div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div>
<div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div>
<div abc="element2x">Hello World!</div>