Combining class selector with attribute selector

Question

I have the following HTML:

<a href="somelink.htm" class="button columns large-6">wide button</a>
<a href="somelink.htm" class="button columns large-3">narrow button</a>

I've tried using an attribute selector and combining it with the button class but it doesn't work as expected.

.button.[class*="large-"] {
    font-size: 0.9em;
}

Am I using this correctly and if not, how?

Answer 1

You don't need the second period, unlike JavaScript the [class*="large-"] isn't compiled to return the found-string, it's simply evaluated as-is:

.button[class*="large-"] {
    font-size: 0.9em;
}

JS Fiddle demo.

Answer 2

.button[class*="large-"] {
   font-size: 0.9em;
}

<a href="somelink.htm" class="button columns large-6">wide button</a>
<a href="somelink.htm" class="button columns large-3">narrow button</a>
<a href="somelink.htm" class="button columns large">narrow button</a>
<a href="somelink.htm" class="large-2">narrow button</a>

this seems to work