Select all classes containing a word?

[Blackhawkso]

Hey everyone,

I’ve got a feeling i’ve seen this done but i’m getting a complete mental block. I’m using the icomoon icon font and classes.

I am attaching various icons to different li in an ul. I am doing this using the class method so for example

<li class="icon-map">

what I want to do is select all versions of .icon without having to specify all of them. I’ve got a niggling feeling that i’ve seen this done but I might be imagining it or just quite simply forgot it.

Can anyone help??

Cheers.
Phil

[tomrogers123]

You can use an attribute selector where the attribute to be selected is class but must start with “icon” eg.

`[class^=”icon”] {

}`

This will select all elements with a class beginning with icon. If you want to learn more, this could help: https://css-tricks.com/attribute-selectors/

[Paulie_D]

I think

[class*=”keyword”]
would select al classes containing ‘keyword’ whether it’s first, last or part of a name….right?

http://codepen.io/anon/pen/rpGob

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

[CrocoDillon]

[class^="icon"] sadly fails if there is another class in specified before icon-whatever like <li class="fancy icon-map">, go with [class*="icon"] as Paulie mentioned :)

[Blackhawkso]

Right got it thank you everyone for your help.

I’m very glad that i didn’t just imagine it lol

[nicholemaureen]

FYI for those copy/pasting this in the future – replace the quotations! Mine failed initially because they were curly quotes.

[StevenWho]

Thanks Nichole!

[Deven]

How could you do this with Javascript?

[Beverleyh]

Look in to querySelectorAll() with the class/asterisk attribute selector advised above.

[Author]

Posts