Как получить элемент по частичному имени класса с помощью CSS? ⇐ CSS

[Anonymous]

Я создаю несколько кнопок CSS и хочу сделать их как можно короче, поэтому начал так:
[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;
}

Это повлияет на все элементы, содержащие класс my-button.
Теперь я хочу углубиться в это и сделать следующее:
[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;
}

Но поскольку класс -large может появиться в стороннем CSS, добавленном пользователем, я хотел бы быть более конкретным и вместо этого сказать что-то вроде этого:
[class*='mybuttons-button-*ANYTHING*-large']

Чтобы мне не пришлось этого делать:
mybuttons-button-color-large
mybuttons-button-red-large
mybuttons-button-green-large
mybuttons-button-color-medium
mybuttons-button-red-medium
mybuttons-button-green-medium

Кто-нибудь знает, как это сделать? Возможно ли вообще, чтобы среднее слово содержало только?
Я знаю, что могу разместить имена классов и т. д., но хотел бы попробовать, поскольку для меня это:


Выглядит чище:



Подробнее здесь: https://stackoverflow.com/questions/237 ... e-with-css