Selecting multiple CSS ids with only 1 number changing on each

Question

I have an issue I am trying to select multiple CSS classes / ids.

The way my theme calls multiple buttons is it adds +1 to the button id like so:

edit-add-to-wishlist
edit-add-to-wishlist--1
edit-add-to-wishlist--2
edit-add-to-wishlist--3
etc

I wish to make said buttons all float to the right, without having to individually name and create each id in the CSS.

I have attempted to use the nth:child option as well as the * universal selector without much success.

Is selecting multiple a range (I guess you would call it) possible?

Something like this:

#edit-add-to-wishlist--* {
    float: right;
}

If I were you I'd add a class along with your id to differentiate between 1, 2, 3, 4, etc. That way you don't have multiple ids that are similar except for one digit and you can accomplish what you're trying to do. — Jace Cotton
– Jace Cotton, Commented Oct 24, 2013 at 1:27
for example if you have them in a <ul class="wish"> <li id="edit-add-to-wishlist"></li> <li id="edit-add-to-wishlist" > </li> <li id="edit-add-to-wishlist" > </li> </ul> you can call all of them by doing ul.wish li{ color:red }; — Sergio Wizenfeld
– Sergio Wizenfeld, Commented Oct 24, 2013 at 1:31
@SergioWizenfeld He made it fairly clear that's not what he was doing. — Jace Cotton
– Jace Cotton, Commented Oct 24, 2013 at 1:38

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You can use the attribute selector: [attr*=value]:

[id*=edit-add-to-wishlist] {
    color: red;
}

jsFiddle here - it works

It selects all instances where a id contains edit-add-to-wishlist

[attr*=value]

Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

CommunityBot

11 silver badge

answered Oct 24, 2013 at 1:29

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

3 Comments

I thought the OP said it added 1 to the ID?

@DevlshOne Yep - they did.

K.. just keeping ya honest, bud.

DevlshOne · Accepted Answer · 2013-10-24 01:32:11Z

0

button[id^=edit-add-to-wishlist] {float:right}

Uses CSS3's substring matching by looking for <button id="edit-add-to-wishlist*> where the asterisk is a wildcard.

answered Oct 24, 2013 at 1:32

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges