Webmasters Gallery

In CSS, attribute selectors have some fairly powerful matching abilities. You can match any attribute and and any attribute with exact values, values that start with certain text, contain certain text, end with certain text, etc. This allows you to get pretty weird with a styling “language” if you want to.

For example…

<div fencing="a bit dotty"></div>

That’s a totally made up attribute, so hopefully that never means anything in future HTML. We can select on it now though:

[fencing="a bit dotty"] {
  border: 2px dotted black;
}

If we were building a “language”, we could make an alternate:

[fencing="a lot dotty"] {
  border: 4px dotted black;
}

or even split it up like…

[fencing] {
  border-color: black;
}
[fencing*="dotty"] {
  border-style: dotted;
}
[fencing*="a bit"] {
  border-width: 2px;
}
[fencing*="a lot"] {
  border-width: 4px;
}

weird right.

I see it around sometimes. Here’s an even more fleshed out example by Dan Chilton:

<p style="three quarters width with a black 
          background, light text, red border, 
          thick border, rounded, lots of padding, 
          and a drop shadow">
  Lorem ipsum...
</p>

The CSS accommodates the language like…

[style*="full width"] { width: 100%; }
[style*="three quarters width"] { width: 75%; }
[style*="half width"] { width: 50%; }
[style*="quarter width"] { width: 25%; }

[style*="gray background"] { background-color: #CCC; }
[style*="black background"] { background-color: #000; }
[style*="yellow background"] { background-color: #FF0; }
[style*="pink background"] { background-color: #FAA; }

/* a bunch more */

Demo:

See the Pen Semantic style language exercise by Dan Chilton (@bjork24) on CodePen.

That might seem silly, but “Real Things” use it sometimes too, like the Flex Layout Attribute thing that was going around not too long ago.

Mark Huot combined this idea with unicode characters. How about some HTML like this:

<div class="box" box="↖"></div>
<div class="box" box="▣"></div>

And CSS to match the “language”:

[box*="▣"] { padding: 20px; }
[box-xl*="▣"] { padding: 40px; }

[box*="↑"] { padding-top: 20px; }
[box*="→"] { padding-right: 20px; }
[box*="↓"] { padding-bottom: 20px; }
[box*="←"] { padding-left: 20px; }

[box*="↕"] { padding-top: 20px; padding-bottom: 20px; }
[box*="↔"] { padding-left: 20px; padding-right: 20px; }

[box*="↖"] { padding-top: 20px; padding-left: 20px; }
[box*="↗"] { padding-top: 20px; padding-right: 20px; }
[box*="↘"] { padding-right: 20px; padding-bottom: 20px; }
[box*="↙"] { padding-bottom: 20px; padding-left: 20px; }

Demo:

See the Pen Crazy Box Padding by Mark Huot (@markhuot) on CodePen.

This idea of putting a styling language into attributes isn’t far away from what Atomic CSS is:

Made some handy @code snippets to write Atomic CSS. Now no need to remember the #acss syntax!

/cc @thierrykoblentz pic.twitter.com/IvfdsKdOak

— Pankaj Parashar (@pankajparashar) March 13, 2016

Or Expressive CSS, either, which encourages style-specific class names.

You can kinda invent your own weird design language with attributes and attribute selectors is a post from CSS-Tricks