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

Question

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?

There are more attributes than just `id` and `class`. I’ve seen it most commonly used in the context of `input[type="text"]` to select a specific type of input — MTCoster, Feb 14 '19 at 18:50
If you're not sure if you need it, you probably don't. Whenever you don't have to use these so called regex selector avoid them. They are pretty expensive render-wise. — Danny van Holten, Feb 14 '19 at 18:59
@TylerH This is not a duplicate. The question you linked is asking if something is possible, my question is asking about the usefulness of selectors. Two entirely different questions. Furthermore, I have long since accepted a very thorough answer. — elbrant, Jun 26 '19 at 22:51
@elbrant The answers in the target question linked above answer this question, too, which is what the duplicate function is for. That you've accepted an answer here is completely irrelevant. — TylerH, Jun 27 '19 at 13:36

AndrewL64 · Accepted Answer · 2019-02-25T09:23:55.350

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>

This description of `~=` is incorrect. The selector can only specify one word, but it matches every element whose target attribute, when interpreted as a list of whitespace-separated words, contains that word. For example, `
` is matched by `div[title~="baz"]`. On the other hand, `[foo~="a b"]` never matches: No single word will be equal to "a b" (because single words don't contain spaces). — melpomene, May 07 '19 at 18:23

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

1 Answers1