Що це за селектор CSS? [class * = “span”]

190

Я бачив цього селектора у Twitter Bootstrap:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

Хтось знає, як називається ця техніка і що вона робить?

css css-selectors

— jon
джерело

1

api.jquery.com/attribute-contains-selector

— biziclop

1

Доступно багато класних селекторів CSS: w3.org/TR/selectors/#selectors

— Тім Медора

jsbin.com/otizoz/edit#javascript,html,live

— Roko C. Buljan

Подібний, але не повний дублікат, stackoverflow.com/questions/7366323/… (який посилається тут)

— BoltClock

332

Це вибір атрибутів підстановки. У наведеному зразку він шукає будь-який дочірній елемент під .show-gridцим класом, який ВІДНАЄ span.

Отже, вибиратимемо <strong>елемент у цьому прикладі:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

Ви також можете здійснити пошук "починається з ..."

div[class^="something"] { }

що працювало б на щось подібне: -

<div class="something-else-class"></div>

і "закінчується ..."

div[class$="something"] { }

яка б працювала над

<div class="you-are-something"></div>

Хороші довідники

— єNaN1247
джерело

1

Я знаю, що це стара відповідь, але я додав би це посилання до списку посилань: w3.org/TR/css3-selectors

— Dread Boy

2

Хочеться

— user3339411

6

У div[class^="something"] { }«починається з" селектор працює тільки якщо елемент містить один клас, або якщо кілька, коли цей клас є першим один на лівій стороні .

— Нан

2

Я б додав div[class~="something"]для пошуку відповідностей у списках, розділених пробілом (наприклад, класи) та div[class|="something"для відповідності у списку, розділеному дефісом, наприклад, узгодження чогось із вами-є-щось назви класу вище

— Рускін

31

.show-grid [class*="span"]

Це CSS-селектор, який вибирає всі елементи із класу show-grid , який має дочірній елемент, клас якого містить проміжок імені .

— Спайк
джерело

15

насправді, він вибирає "дочірній елемент, який у класі містить ім'я" span ", а не " всі елементи з класовою шоу-сіткою "

— Utopik

3

Наступне:

.show-grid [class*="span"] {

означає, що всі дочірні елементи '.show-grid' з класом, який ВИМІРЮЄ в ньому слово 'span', придбають ці властивості CSS.

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

Усі елементи потрапляють, крім самих <span>себе.

З повагою до Bootstrap:

span6 : це техніка будівельних лісів Bootstrap 2, яка розділила секцію на горизонтальну сітку на основі частин 12. Таким чином span6 вона мала б ширину 50%.
У поточному впровадженні Bootstrap (v.3 та v.4) ви тепер використовуєте .col-*класи (наприклад col-sm-6), які також визначають медіа-межу точки обриву для реагування, коли вікно скорочується нижче певного розміру. Перевірте Bootstrap 4.1 та Bootstrap 3.3.7 для отримання додаткової документації. Я б порекомендував піти з більш пізньою Bootstrap сьогодні

— Тайлер
джерело

2

Він вибирає всі елементи, де ім'я класу "span"десь містить рядок . Там також ^=для початку рядка і $=для кінця рядка. Ось хороша довідка для деяких селекторів CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Я знайомий тільки з класами початкового завантаження , spanXде X є цілим числом, але якщо існують інші селектори , які закінчилися в span, він також підпадає під ці правила.

Це просто допомагає застосувати правильні CSS правила.

— Кевін Лі
джерело