Geek Answers Handbook

Is it possible to use a css permutation class selector where there are multiple class values?

Is there a CSS selector where I can select all the anchors with the class containing the icon - *

<a class="icon-a icon-large scrollTo" href="#a"></a> <a class="icon-large icon-b scrollTo" href="#b"></a> <a class="icon-large scrollTo icon-c" href="#c"></a>

I just messed up the icon - since I want to check if the css selector can handle all cases.

I want to be able to change the style of all anchors containing the class icon - *. This code does not work.

 a [class^="icon-"], a [class*=" icon-"] { text-decoration: none; color: #1BA1E2; }

Is Javascript my only option?

+7
source share
2 answers

You used the wrong selector - a [class] - all bindings with class as descendant .

Basically, any element coming from <a> that starts with or contains the icon- class will be targeted.

You want to select all the anchors starting with the class itself or containing it - a[class] :

 a[class^="icon-"], a[class*=" icon-"] { text-decoration: none; color: #1BA1E2; }

JsFiddle example here.

+20
source

Yes - but first you need to remove the space between the type selector and the attribute selector and the space in the attribute value:

 a[class^="icon-"], a[class*="icon-"] { text-decoration: none; color: pink; /* get rid of the # */ }

http://jsfiddle.net/c8YdD/1/

+5
source

More articles:


All Articles