Give help. Get help.

  • # 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 &lt;li class="fancy icon-map"&gt;, 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.

    # November 9, 2016 at 10:40 pm

    Thanks Nichole!

    # May 2, 2018 at 1:31 pm

    How could you do this with Javascript?

    # May 2, 2018 at 9:52 pm

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

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

You must be logged in to reply to this topic.