What does img[class*="align"] mean in CSS? [duplicate]

Question

What does img[class*="align"] mean in CSS?

I have seen this in many stylesheets, but I'm not sure why it's used and what it does. Any idea?

Answer 1

It will match all img elements that have a class that contains align.

The spec, has more information on this:

W3 Spec on CSS selectors

Answer 2

It's an attribute selector which matches any img tag class text including "align". For instance, it would match any of the following:

<img class="dummy align test" />
<img class="test align-1" />
<img class="hello-align" />
<img class="abaligncd" />
<img class="align" />

From the documentation (linked above):

E[foo*="bar"] - an E element whose "foo" attribute value contains the substring "bar"

This is used in popular CSS frameworks to style multiple similar classes without having to add a new identical class to each. For instance, if we had the following markup:

<p class="central para-red">Hello, world!</p>
<p class="para-green bold">Hello, world!</p>
<p class="para-blue">Hello, world!</p>
<p>Hello, world!</p>

We could apply styling to all of the p elements whose class contains "para-" without having to manually type all the variations by simply using:

p[class*="para-"] { ... }

Here is a JSFiddle example of this in use.