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

Question

Is there a CSS selector where i can select all anchors with a class containing 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 jumbled 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 that contains the class icon-*. This code doesn't seem to work.

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

Is Javascript my only option?

You can't have a class that contains space, so the second selector doesn't make sense. — Barmar
– Barmar, Commented Jun 5, 2013 at 15:09
@Barmar: But you can have a class attribute with a value that contains a space. It's right there in the markup - spaces are used to separate class names. — BoltClock
– BoltClock, Commented Jun 5, 2013 at 15:09
D'oh, right, the attribute selector doesn't parse it like a class selector does. — Barmar
– Barmar, Commented Jun 5, 2013 at 15:10

dsgriffin · Accepted Answer · 2013-06-05 18:13:08Z

22

You were using an incorrect selector - a [class] is all anchors with a class as a descendant.

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

What you want is to select all anchors starting with or containing that class themselves - a[class]:

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

jsFiddle example here.

edited Jun 5, 2013 at 18:13

answered Jun 5, 2013 at 15:07

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

atp03 Over a year ago

I'm a complete css noob. Thanks! Is the 2nd selector actually required? Not exactly sure what it does since i coped this code from font-awesome in an attempt to override something.

Adrift Over a year ago

@user1133619: The first selector is the more appropriate one, and yes they both do the same thing in this context.

Adrift · Accepted Answer · 2013-06-05 15:07:56Z

5

Yes - but you first 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/

answered Jun 5, 2013 at 15:07

Adrift

60k12 gold badges98 silver badges92 bronze badges

1 Comment

BoltClock Over a year ago

And now the question has changed it to #1BA1E2 which is decidedly not pink...?!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related