Get help. Give help. A Web Design and Development Community.

Select all classes containing a word?

  • # February 12, 2013 at 2:10 pm

    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??


    # February 12, 2013 at 2:48 pm

    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:

    # February 12, 2013 at 3:09 pm

    I think

    would select al classes containing ‘keyword’ whether it’s first, last or part of a name….right?

    # February 12, 2013 at 4:21 pm

    [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 :)

    # February 12, 2013 at 4:24 pm

    Right got it thank you everyone for your help.

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

    # May 20, 2016 at 8:08 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.