Grow your CSS skills. Land your dream job.

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

  • 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

# 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: http://css-tricks.com/attribute-selectors/

# February 12, 2013 at 3:09 pm

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/

# February 12, 2013 at 4:21 pm

`[class^=”icon”]` sadly fails if there is another class in specified before icon-whatever like `

  • `, 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

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

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".