Still-fishing the Specs

Considering the pleasures of CSS Specifications as casual reading

What the hell is this supposed to do?

[class^="some-value"] {
  padding: 3rem 2rem 0;
}

That construction, [attribute^="value"], is one of a set of “attribute substring combinators” (an explanation at MDN) that allow you to use something like a regular expression (it’s not actually a regular expression, just resembles one) to refine a selector. You might wonder, like I did when I first encounntered it, how on earth that could ever be useful.

Here’s how.



I had this mark-up, plastered into a WordPress page by a plugin with no templating features:

<section id="content"></section>
  <div id="plugin-name/629f54375000274344c1/item-title" class="plugin-name/629f54375000274344c1/item-title page type-page status-publish hentry">
    <!-- Some stuff. -->
  </div>
</section>

Ugliness.

The <section> element was placed by a WordPress theme template and there was no plugin identified plopped in the body class. This was one of many similar pages which the user arrived at by selecting from a list of links. The content placed by the plugin was overlapping a decorative border making the whole thing look amateurish.

This was a perfect use-case for an attribute substring combinator which I knew about but never used in a website until this. Here was my CSS markup:

[class^="plugin-name"] {
  padding: 3rem 2rem 0;
}

The selector means “any element with a class-name beginning with ‘plugin-name'”, making it apply to all of the generated elements regardless of their appended id number. Sweet.