How to get element by its partial class name CSS

Question

I am creating few css buttons and would like to style them as short as possible so I started like this

[class*='mybuttons-button']{
    margin-top:5px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    display:inline-block;
    padding:6px 12px;
    color:#fff;
    vertical-align:middle;
    cursor:pointer;
}

which will affect all elements that contain class my-button

now I want to get deep in to it and do this

[class*='-large']{
    padding: 10px 16px;
    font-size:120%;
    line-height: 1.33;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
[class*='mybuttons-button-color']{
    background:blue;
}

but since the class -large might come up in some 3rd party CSS added by user I would like to be more specific and say something like this instead

[class*='mybuttons-button-*ANYTHING*-large']

so that I dont have to do this

mybuttons-button-color-large
mybuttons-button-red-large
mybuttons-button-green-large
mybuttons-button-color-medium
mybuttons-button-red-medium
mybuttons-button-green-medium

Does anyone know a way to do this? Is it possible at all, to nail the middle word instead contains only?

I know I can space the class names etc , but would love to give this a try since, to me, this**

<span class="mybuttons-button-color-large"></span>

looks cleaner than this:

<span class="mybuttons-button color large"></span>

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selector — Kevin Boucher, May 19 '14 at 21:34
I am pretty sure this is not possible and is really unnecessary given the other form you have shown. It may look less clean to you but it *definitely* doesn't to me — Zach Saucier, May 19 '14 at 21:35
Like said just wanted to give it a try it would be nice to know if it is possible at all. But I have not seen anything similar either. — Benn, May 19 '14 at 21:37
I've tried to combine begin and end attribute selector. http://jsfiddle.net/zYLYG/9/ i don't know if is what you need — keypaul, May 19 '14 at 22:27
Generally, performing partial matches on class names is problematic, precisely due to the nature of class names being potentially numerous, and the fact that they are whitespace-separated. If this were the only class name then you could use attribute selectors as mentioned, but since 3rd-party code could add other classes to the same elements, that just complicates matters. — BoltClock, May 20 '14 at 02:53
@KevinBoucher, it's actually https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors now. — scott8035, Apr 15 '22 at 22:08
@keypaul This is what I was looking for and it works great for me! But as BoltClock points out, you have to be careful with 3rd-party code. — tvwxyz, Jul 07 '22 at 21:57

willanderson · Accepted Answer · 2015-05-11T15:33:40.913

57

In the same way you can do this .class.class2.class3 { /*styles*/ } to target only things that have all 3 classes, you can can combine attribute selectors to do the same:

[class*="mybuttons-button"][class*="-large"] { /*styles*/ }

Granted it won't work in a case like this:

<span class="my-buttons-button-color-small something-else-large"></span>

since it contains both mybuttons-button and -large.

If you didn't think that would happen or be an issue you should be fine. Here's a fiddle: http://jsfiddle.net/3wEJe/

Definitely wouldn't recommend it though.

edited May 11 '15 at 15:33

answered May 19 '14 at 22:03

willanderson

1,458
12
13

3

These are called attribute selectors. – BoltClock May 20 '14 at 02:42
Why do you have to use the asterisk symbol (*) after class? I guess this is CSS3. – stephanmg Dec 09 '18 at 20:04

score -4 · Answer 2 · answered May 19 '14 at 21:47

-4

If you separate your class names, then you can use CSS selectors to only grab an element with two classes, instead of relying on wild cards, as so:

<span class="mybuttons-button color large"></span>

.mybuttons-button.large {
    font-size: 120%
}

Remember that ".class1.class2" is different than ".class1 .class2" (with the space): the first looks for an element with BOTH classes; the second looks for descendants of class1 that are class2.

answered May 19 '14 at 21:47

collardeau

800
7
13

1

Well sorry if I misunderstand the end goal. If you want keep your classes together with dashes, this could work: [class*="my-button"][class*="large"] to target only classes with large in the name that also have my-button – collardeau May 19 '14 at 21:58

How to get element by its partial class name CSS

2 Answers2

Linked