Как получить элемент по его частичному имени класса CSS

Я создаю несколько кнопок 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;
}

который повлияет на все элементы, содержащие class 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

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

Я знаю, что могу разместить имена классов и т. д., Но хотел бы попробовать, так как для меня это**

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

выглядит чище, чем этот:

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

2 ответов

таким же образом вы можете сделать это .class.class2.class3 { /*styles*/ } только вещи, которые имеют всего 3 класса, вы можете комбинировать селекторы атрибутов, чтобы сделать то же самое:

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

конечно, он не будет работать в таком случае:

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

так как он содержит оба mybuttons-button и -large.

если вы не думали, что это произойдет или будет проблемой, вы должны быть в порядке. Вот скрипка:http://jsfiddle.net/3wEJe/

определенно не рекомендовал бы хотя ...

16

Если вы разделяете имена классов, то вы можете использовать селекторы CSS только для захвата элемента с двумя классами, а не полагаться на подстановочные знаки, как это:

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

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

помните, что ".класс1.class2 " отличается от ".класс1 .class2 " (с пробелом): первый ищет элемент с обоими классами; второй ищет потомков class1, которые являются class2.

0