Селектор [атрибут|="значення"] у CSS — збіг до дефіса
Селектор [attribute|=value] використовується для обирання елемента, у котрого значення атрибута починається із вказаного рядка, або значення атрибута починається з визначеного рядка і після нього йде дефіз (-).
Цей селектор зручно використовувати з стильовими фреймворками, наприклад, bootstrap. Зазвичай фреймворми найменують свої класи, типу "table-hover" і цей селектор дозволяє обирати такі назви, якби назва класу була не в такому стилі, а наприклад "tableHover" - цей селектор не спрацював би.
Загальний опис
автор: NagarD
- Порада
-
Значенням має починатися із зазначеного рядка, або після зазначеного рядка має йти дефіз.
автор: NagarD
Синтаксис
[attribute |= value] {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
|= працює з будь-яким атрибутом: збіг — точне "top" або "top-…" через дефіс; "topmenu" без дефіса не підходить.
HTML
<p class="top">class="top" — жовтий</p>
<p class="top-menu">class="top-menu" — теж жовтий: "top-" із дефісом</p>
<p class="topmenu">class="topmenu" — без змін</p>CSS
[class|=top] {
background-color: yellow;
}Селектор |= створено для мовних кодів: збігається точне значення "en" або значення з дефісним продовженням "en-US"; "uk" — ні.
HTML
<p lang="en">lang="en" — жовтий</p>
<p lang="en-US">lang="en-US" — теж жовтий: дефісне продовження</p>
<p lang="uk">lang="uk" — без змін</p>CSS
[lang|=en] {
background-color: yellow;
}Ліворуч видно, для чого запис придумали: мовні коди з дефісом. Праворуч — чому його не варто чіпляти до класів: [class|="btn"] не збігається з class="btn btn-primary". Унизу — різниця в регістрі між lang і власним атрибутом.
HTML
<div class="cols">
<div class="card langs">
<h4>Для чого придумали</h4>
<p lang="en">lang="en" — збіг</p>
<p lang="en-US">lang="en-US" — збіг, дефіс</p>
<p lang="en-GB">lang="en-GB" — збіг</p>
<p lang="english">lang="english" — НЕ збіг: після en немає дефіса</p>
<p lang="de">lang="de" — не збіг</p>
<p lang="">lang="" — збіг із <code>[lang|=""]</code></p>
<p class="verdict">Зелена рамка — <code>[lang|="en"]</code>,
жовта — <code>[lang|=""]</code>.</p>
</div>
<div class="card classes">
<h4>Чому не для класів</h4>
<p class="btn">class="btn" — збіг</p>
<p class="btn-primary">class="btn-primary" — збіг</p>
<p class="btn btn-primary">⚠️ class="btn btn-primary" — НЕ збіг:
селектор дивиться на все значення атрибута цілком</p>
<p class="mybtn">class="mybtn" — не збіг</p>
<p class="verdict">Зелена рамка — <code>[class|="btn"]</code>,
синій пунктир — <code>[class~="btn"]</code>, який якраз шукає
окреме слово й тому бере третій рядок.</p>
</div>
</div>
<h4 class="cap">Регістр: lang порівнюється не так, як власний атрибут</h4>
<div class="card wide">
<p lang="EN">lang="EN" — збігається з <code>[lang|="en"]</code> без жодних
прапорців: <code>lang</code> у html порівнюється без урахування регістру</p>
<p data-x="top">data-x="top" — збіг</p>
<p data-x="top-menu">data-x="top-menu" — збіг</p>
<p data-x="TOP">⚠️ data-x="TOP" — НЕ збіг із <code>[data-x|="top"]</code>,
але збіг із <code>[data-x|="top" i]</code> (жовте тло)</p>
</div>CSS
.langs [lang|="en"] {
outline: 2px solid #3a9a4f;
outline-offset: 2px;
}
.langs [lang|=""] {
background: #fff3d6;
}
.classes [class|="btn"] {
outline: 2px solid #3a9a4f;
outline-offset: 2px;
}
.classes [class~="btn"] {
border-bottom: 2px dashed #2f6fd0;
}
.wide [lang|="en"],
.wide [data-x|="top"] {
outline: 2px solid #3a9a4f;
outline-offset: 2px;
}
.wide [data-x|="top" i] {
background: #fff3d6;
}
.cols {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.card {
flex: 1 1 300px;
padding: 4px 14px 12px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
font-size: .9rem;
}
.card.wide {
max-width: 620px;
}
.card h4 {
margin: 14px 0 10px;
font-size: .95rem;
}
.card p {
margin: 9px 0;
}
.verdict {
margin-top: 14px;
padding-top: 8px;
border-top: 1px solid #e2e8f0;
color: #5a6472;
font-size: .85em;
}
.cap {
margin: 24px 0 8px;
font-size: 1rem;
color: #5a6472;
}
code {
background: #eef4ff;
border-radius: 3px;
padding: 0 4px;
}Коментарі
Коментарів ще немає — будьте першим!