Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Combining class selector with attribute selector

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?

like image 239
DAC84 Avatar asked Oct 21 '13 15:10

DAC84


People also ask

Can I use multiple selectors in CSS?

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space)

How do you group multiple selectors?

The grouping selector selects all the HTML elements with the same style definitions. It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.


2 Answers

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.

like image 84
David Thomas Avatar answered Sep 25 '22 16:09

David Thomas


.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

like image 28
BlackScorp Avatar answered Sep 22 '22 16:09

BlackScorp