What does this CSS (|=) mean? What is it called?

Question

I have some code that looks like

[class|="e"]
{
    margin: 0 0 0 0;
} 

What does this the |= mean? What should I be googling for?

I tried searching stackoverflow (which can find punctuation) and Google but its hard to search without a name.

Answer 1

That is known as an attribute selector. Specifically, the |= attribute selector looks for elements with the given attribute, whose value exactly matches the given value or starts with the given value immediately followed by a - (a prefix, if you will).

Your selector matches elements with a class attribute with a value that:

• is exactly e, or
• starts with e-.

It's equivalent to the combined result of the following two attribute selectors:

[class="e"], [class^="e-"]

Note that |= is typically used with language attributes such as hreflang and lang, although in the case of the latter, :lang() is often preferred — this answer explains the difference between the two.

You can use |= with any other attribute, but be careful when using it with the class attribute, because it ignores multiple space-separated class names — it always looks at the entire attribute value or the very beginning of the value, rather than each individual class name.

As an example, the following elements will match your selector because e and e-c occur at the very beginning of the attribute value:

<div class="e"></div>
<div class="e-c"></div>
<div class="e-c f"></div>

However, neither of these elements will match your selector, because the value starts with f:

<div class="f e"></div>
<div class="f e-c"></div>

If you need to match a class prefix on elements that can potentially have multiple classes, I recommend using a different set of attribute selectors instead:

[class^="e-"], [class*=" e-"]

This will match all of the .e-c elements listed above. See this other answer for an explanation.

Answer 2

[class|="e"]
{
    margin: 0 0 0 0;
}

Selects all elements whose class attribute contains values that are exactly "e", or begin with "e-".

And some examples:

1. <div class="e"></div> MATCH

2. <div class="ea"></div> DOESN'T MATCH

3. <div class="e-a"></div> MATCH

4. <div class="ae-"></div> DOESN'T MATCH