What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

~ ~ selector is in fact the subsequent-sibling combinator (передусім називається загальний sibling combinator until 2017):

Подібний-сибірний комбінатор являє собою "tilde" (U+007E, ~) характер, що відокремлює два sequences of simple selectors. Element represented by the 2 sequences share the same parent in the document tree and element represented by the first sequence precedes (no necestly immediately) the element represented by the second one.

Consider the following example:

.a ~ .b збирають 4-й і 5-й аркуш пункту because they:

Are .b elements
Are siblings of .a
Appear after .a в HTML source order.

Likewise, .check:checked ~ .content matches all .content elements що є siblings .check:checked and appear after it.

Шпаргалка по часто використовуваних CSS селекторах

Шпаргалка CSS селекторів. З підказками, як вибирати HTML елементи за класом, ім'ям, атрибутами та списком дочірніх селекторів.

CSS селектори націлюються та вибирають HTML елементи, які ви хочете стилізувати. Зокрема, селектори CSS дозволяють одночасно вибирати декілька елементів. Вони корисні, коли ви хочете застосувати ті самі стилі до кількох елементів HTML, тому що ви не будете повторюватися, писати одні й ті ж рядки коду для різних елементів.

Ця шпаргалка охоплює найбільш часто використовувані селектори, про які вам потрібно знати, коли ви починаєте вивчати CSS.

Прості CSS селектори

Селектори дозволяють націлюватися та вибирати певні частини HTML документа для стилізації.

Прості CSS селектори безпосередньо вибирають один або кілька елементів:

За допомогою універсального селектора *.
На основі імені/типу елемента.
За підсумками значення класу елемента.
З урахуванням значення ідентифікатора елемента.

Вивчивши, як працюють найпростіші селектори, ви зможете зрозуміти, як використовувати складніші. Прості CSS селектори найчастіше використовуються.

Універсальний CSS селектор

Універсальний CSS селектор, також відомий як знак підстановки, вибирає все - кожен елемент в документі. Як універсальний селектор використовується символ * .

Ви можете використовувати універсальний селектор, щоб скинути відступи та поля встановлені за замовчуванням браузером для елементів до нуля, перш ніж додавати будь-які інші стилі:

*


padding: 0;

margin: 0;

>

CSS селектор типу

Селектор типу вибирає всі елементи HTML зазначеного типу. Для його використання вкажіть ім'я елемента. Наприклад, якщо ви хочете застосувати стиль до кожного пункту HTML-елемента, ви повинні вказати елемент p :

Наведений вище код зіставить і вибере всі елементи p документі, і стилізує їх.

CSS селектор класу

Селектор класу зіставляє та вибирає HTML елементи на основі заданого класу. Зокрема, він обирає кожен окремий елемент у документі із цим конкретним ім'ям класу.

За допомогою селектора класів ви можете вибрати відразу кілька елементів і застосувати до них однаковий стиль без копіювання та вставки одних і тих самих стилів для кожного окремо.

Класи можна використовувати повторно, що робить їх добрим варіантом практики DRY-розробки. DRY - це принцип розробки, скорочення від 'Don't Repeat Yourself (Не повторюйся). Як випливає з назви, мета полягає в тому, щоб по можливості уникати написання коду, що повторюється.

Для вибору елемента за допомогою селектора класу використовується символ точки . , За яким слідує ім'я класу.

.my_class


property: value;

>

У наведеному вище коді елементи з my_class класом вибираються і оформляються відповідним чином.

CSS селектор ідентифікатора

Селектор ідентифікатора вибирає HTML елемент з урахуванням значення його атрибута id .

Майте на увазі, що ідентифікатор елемента має бути унікальним у HTML документі, тобто має бути лише один HTML елемент із цим значенням ідентифікатора. Ви не можете використовувати те саме значення ідентифікатора для іншого елемента, крім цього.

Щоб вибрати елемент із певним ідентифікатором, використовуйте символ # , за яким слідує ім'я ідентифікатора:

#my_id


property: value;

>

Наведений вище код буде відповідати лише унікальному елементу зі значенням ідентифікатора my_id.

Варто відзначити, що краще спробувати обмежити використання цього селектора і вибрати замість нього селектор класу. Застосування стилів за допомогою селектора ідентифікаторів не є ідеальним варіантом, оскільки стилі не можна використовувати повторно.

CSS селектор атрибутів

Багато HTML елементів є атрибути.

Надають додаткову інформацію про HTML елементи.
Завжди вказуються в початковому (або тезі, що відкривається).
Зазвичай використовуються пари ім'я/значення, такі як ім'я = 'значення' .
Значення в парі ім'я/значення має бути поміщене у лапки.

Одним з найпопулярніших HTML атрибутів, з яким, ви можливо, стикалися, є атрибут href , який додається до тега, що відкриває, і вказує URL-адресу, на яку посилається тег :

Значення href є URL https://www.freecodecamp.org/ , на якій перейде користувач, клікнувши на текст посилання The best place to learn to code for free!

Селектор атрибутів зіставляє та вибирає HTML елементи на основі наявності значення атрибута. Існують різні типи селекторів атрибутів. Нижче наведено деякі з найпоширеніших селекторів атрибутів.

Селектор атрибуту [attribute]

Для використання CSS селектора атрибутів використовуйте кілька квадратних дужок [] для вибору потрібного атрибута. Загальний синтаксис для селекторів атрибутів:

Цей селектор вибирає елемент, якщо атрибут attribute існує. У наступному прикладі вибираються елементи, що мають атрибут attr незалежно від конкретного значення атрибута:

a[attr]


property: value;

>

У наведеному вище прикладі вибираються елементи a з іменем атрибуту attr незалежно від значення attr.

З урахуванням сказаного ви можете бути більш конкретним у своєму стилі.

Селектор атрибуту [attribute="value"]

Використовуючи наступний синтаксис, можна вказати значення атрибута:

element[attribute="value"]

Отже, якщо ви хочете стилізувати елементи a з атрибутом attr , який має точне значення 1 , ви повинні зробити наступне:

a[attr="1"]


property: value;

>

Селектор атрибуту [attribute^="value"]

Ви також можете вказати, що значення атрибуту починається з певних символів за допомогою наступного синтаксису:

element[attribute^="value"]

Наприклад, якщо ви хочете вибрати і стилізувати будь-які елементи a , які мають атрибут attr зі значенням, що починається з www , ви повинні зробити наступне:

a[attr^="www"]


property: value;

>

Селектор атрибуту [attribute$="value"]

Ви також можете вказати, що значення атрибута закінчується певним символом, використовуючи наступний синтаксис:

element[attribute$="value"]

Наприклад, якщо ви хочете вибрати елементи a з іменем атрибута attr зі значенням, що закінчується на .com, ви повинні зробити наступне:

a[attr$=".com"]


property: value;

>

Селектор атрибуту [attribute*="value"]

Ви також можете вказати, що значення атрибута містить певний підрядок - цей селектор відомий як CSS селектор атрибута містить підрядок і має наступний синтаксис:

element[attribute*="value"]

У цьому випадку рядкове значення має бути присутнє у значенні атрибута, за яким слідує будь-яка кількість інших символів — значення необов'язково має бути цілим словом. Наприклад, якщо ви хочете вибрати елементи a , які мають атрибут attr зі значенням, що містить рядок free , ви повинні зробити наступне:

a[attr*="free"]


property:value;

>

Наведений вище код вибирає елемента a з ім'ям атрибута attr , коли у значенні атрибута є рядок free - навіть у вигляді підрядка (підрядок - це слово всередині іншого).

Селектор атрибуту [attribute~="value"]

Також можна вказати, що селектор відповідає значенню атрибута, що містить ціле слово, використовуючи наступний синтаксис:

element[attribute~= "value"]

У цьому випадку рядкове має бути цілим словом.

Наприклад, якщо ви хочете вибрати елементи a , які мають ім'я атрибута attr зі значенням, що містить слово free , ви можете зробити наступне:

a[attr~= "free"]


property: value;

>

Код не виділятиме елементи зі значенням атрибуту freeCodeCamp або freediving, як це було в попередньому прикладі, тому що free має бути цілим словом, а не підрядком. Атрибут attr повинен містити слово free, відокремлене від інших символів пробіловими символами.

Групування CSS селекторів

За допомогою групування CSS селекторів можна стилізувати більше одного елемента одночасно. Для групування селекторів, використовуйте кому, для групування або розділення елементів, які ви хочете вибрати.

Наприклад, ось так можна налаштувати націлення на кілька елементів, div, p і span, і застосувати до кожного з них одні й ті ж стилі:

div, p, span


property: value;

>

Цей код знаходить у HTML документі всі елементи div , p і span і надає їм той самий стиль.

Комбінатори CSS селекторів

Комбінатори дозволяють об'єднувати два HTML елементи на основі відносин між ними та їх розташуванням у HTML документі. По суті, ви можете комбінувати два простих селектора таким чином, щоб пояснити взаємозв'язок між цими селекторами CSS. Комбінатори - це тип CSS селектора, який визначає та описує взаємозв'язок між двома селекторами.

Існує чотири типи комбінаторів:

Комбінатор нащадків пробіл.
Прямий дочірній комбінатор > .
Загальний споріднений комбінатор ~.
Сусідний споріднений комбінатор +.

Комбінатор нащадків

Як випливає з назви комбінатор нащадків вибирає тільки нащадків зазначеного HTML елемента.

По суті ви спочатку згадуєте батьківський HTML елемент, ставите прогалину, а потім згадуєте нащадка першого елемента, який є дочірнім елементом. Дочірній HTML елемент – це елемент усередині батьківського HTML елемента.

Як приклад візьмемо таке:

DOCTYPE
html>

html
lang="en">

head>

meta
charset="UTF-8">

meta
http-equiv="X-UA-Compatible"
content="IE=edge">

meta
name="viewport"
content="width=device-width, initial-scale=1.0">

link
rel="stylesheet"
href="main.css">

title>Documenttitle>

head>

body>

div>

h2>I am level 2 headingh2>

p>I am a paragraph inside a divp>

span>I am a spanspan>

p>I am a paragraph inside a divp>

div>

p>I am a paragraph outside a divp>

body>

html>

У наведеному вище прикладі HTML документа div є батьківським елементом, а h2 , span і два p - дочірніми елементами, оскільки вони знаходяться всередині div . Існує також p поза div.

Якщо ви хочете стилізувати тільки ті p, які знаходяться всередині div, ось що ви повинні зробити:

div p


property: style;

>

У наведеному вище прикладі стилізуються лише два p з текстом I am a paragraph inside a div усередині блоку div. Два інші дочірні елементи та абзац поза div з текстом I am a paragraph outside a div не стилізуються.

Прямий дочірній комбінатор

Прямий дочірній комбінатор, також відомий як прямий нащадок, вибирає лише прямих нащадків батька. Для використання комбінатора прямих дочірніх елементів вкажіть батьківський елемент, потім додайте символ > , за яким вкажіть прямі дочірні елементи. Які ви хочете вибрати для стилізації.

Як приклад візьмемо наступний HTML документ:

DOCTYPE
html>

html
lang="en">

head>

meta
charset="UTF-8">

meta
http-equiv="X-UA-Compatible"
content="IE=edge">

meta
name="viewport"
content="width=device-width, initial-scale=1.0">

link
rel="stylesheet"
href="main.css">

title>Documenttitle>

head>

body>

div>

a
href="#">I am a linka>

a
href="#">I am a linka>

p>a
href="#">I am a link inside a paragrapha>p>

div>

body>

html>

У нас є div є батьківським елементом. Усередині батьківського HTML елемента є два елементи a є прямими дочірніми елементами елемента div.

Також є ще один елемент a всередині елемента p. Елемент p є дочірнім елементом div, але елемент a усередині параграфа p не є прямим дочірнім елементом div.

Отже, щоб отримати доступ тільки до елементів a, які є прямими дочірніми елементами div, ви повинні зробити наступне:

div > a


property: value;

>

Наведений вище код вибирає елементи a безпосередньо вкладені в div і є його безпосередніми дочірніми елементами.

Загальний споріднений комбінатор

Загальний споріднений комбінатор вибирає споріднені елементи.

Ви можете вказати перший HTML елемент і другий, який слідує за першим. Другий елемент необов'язково має йти одразу за першим.

Щоб використати спільний комбінатор споріднених елементів, вкажіть перший елемент, потім використовуйте символ ~ , за яким слідує другий елемент.

Як приклад візьмемо таке:

DOCTYPE
html>

html
lang="en">

head>

meta
charset="UTF-8">

meta
http-equiv="X-UA-Compatible"
content="IE=edge">

meta
name="viewport"
content="width=device-width, initial-scale=1.0">

link
rel="stylesheet"
href="main.css">

title>Documenttitle>

head>

body>

div>

p>I am paragraph inside a divp>

div>

p>I am a paragraph outside a divp>

h3>I am a level three headingh3>

p>I am a paragraph outside a divp>

body>

html>

Усередині елемента div є вкладений елемент p. Цей конкретний елемент p є дочірнім елементом div. Також є два параграфи з текстом I am a paragraph outside a div та елемент h3. Всі ці три елементи (p, h3 і p) є спорідненими елементами елемента div (перебувають з ним на одному рівні вкладеності).

Щоб вибрати елемент p є спорідненими елементу div , ви повинні зробити наступне:

div ~ p


property: value;

>

Наведений вище код стилізує обидва елементи p, що йдуть після div. Він стилізує навіть елемент p , який слід безпосередньо за елементом div , наприклад, елемент p наступний за елементом h3 . Це тому, що він все ще йде після div .

Сусідний споріднений комбінатор

Сусідний споріднений комбінатор є більш конкретним, ніж загальний споріднений комбінатор. Цей селектор відповідає лише безпосереднім спорідненим елементам. Безпосередні споріднені елементи - це HTML елементи, що йдуть відразу за першим елементом.

Щоб використовувати комбінатор сусідніх споріднених елементів, вкажіть перший HML елемент, потім додайте символ плюс + за яким слідує елемент, який ви хочете вибрати наступний безпосередньо за першим елементом.

Повернемося, наприклад, з попереднього розділу:

DOCTYPE
html>

html
lang="en">

head>

meta
charset="UTF-8">

meta
http-equiv="X-UA-Compatible"
content="IE=edge">

meta
name="viewport"
content="width=device-width, initial-scale=1.0">

link
rel="stylesheet"
href="main.css">

title>Documenttitle>

head>

body>

div>

p>I am paragraph inside a divp>

div>

p>I am a paragraph outside a divp>

h3>I am a level three headingh3>

p>I am a paragraph outside a divp>

body>

html>

Хоча HTML елемент p наступний за елементом h3 є спорідненим елементом елемента div, він не є безпосередньо спорідненим елементом, як елемент p, що стоїть перед h3.

Таким чином, щоб налаштувати націлення тільки на HTML елемент p, що йде відразу за div , ви повинні зробити наступне:

div + p


property: value;

>

Селектори псевдокласів

CSS селектори псевдокласів вибирають елементи, що знаходяться у певному стані. Приклади станів, в яких можуть бути елементи:

На елемент наведено покажчик миші: hover.
Елемент є першим елементом свого типу: first-of-type.
Посилання було раніше відвідане з цього браузера: visited.
Посилання раніше не відвідувалося в цьому браузері: link.
Чекбокс/радіо кнопка відзначена/встановлена :checked

Селектори псевдокласів починаються з двокрапки : , за яким слідує ключове слово, що відображає стан зазначеного елемента.

Загальний синтаксис виглядає приблизно так:

element:ім'я-псевдокласу


property: value;

>

Селектори псевдокласів для посилань

Існують CSS селектори, що базуються на інформації про стан посилання.

Селектор: link застосовує стиль, коли елемент раніше не відвідувався:

a:link


property: value;

>

Селектор :visited застосовується, коли елемент раніше відвідував поточний браузер:

a:visited


property: value;

>

Селектор :hover застосовується, коли вказівник миші знаходиться над елементом:

a:hover


property: value;

>

Селектор :focus застосовується, коли користувач за допомогою кнопки Tab перемістив фокус на елемент:

a:focus


property:value;

>

Селектор :active застосовується, коли елемент вибраний після натискання та утримання кнопки миші:

a:active


property: value;

>

Селектори псевдокласів для input

Селектор :focus , який ви бачили раніше для посилань, також використовується для input :

input:focus


property: value;

>

Селектор :required вибирає поля обов'язкові для заповнення, input з атрибутом required .

input:required


property: value;

>

Селектор :checked вибирає зазначені поля типу checkbox або radio :

input:checked


property:value;

>

Селектор: disabled вибирає неактивні елементи. Неактивні елементи мають атрибут disabled . Багато браузери за замовчуванням оформляють відключені елементи input бляклим сірим кольором:

input:disabled


property:value;

>

Селектори псевдокласу для позиції

Селектор першого дочірнього елемента: first-child вибирає перший елемент, який буде першим дочірнім елементом усередині зазначеного батьківського контейнера. Наприклад, ось так можна вибрати елемент a якщо він є першим дочірнім елементом в батьківському контейнері:

a:first-child


property: value;

>

Селектор останнього дочірнього елемента: last-child вибирає елемент, який буде останнім дочірнім елементом усередині батьківського контейнера. Наприклад, ось так можна вибрати елемент a, який є останнім дочірнім елементом у батьківському контейнері:

a:last-child


property: value;

>

Селектор першого типу :first-of-type вибирає елементи, які є першими елементами цього конкретного типу в батьківському контейнері. Наприклад, ось так вибрати перший p всередині div :

div p:first-of-type


property: value;

>

Селектор останнього типу :last-of-type вибирає елементи, які є останніми елементами цього конкретного типу в батьківському контейнері. Наприклад, ось так вибрати останній p всередині div

div p:last-of-type


property: value;

>

Селектор :nht-child() корисний, коли ви хочете вибрати елементи на основі виразу, наприклад парні або непарні елементи.

Значення ключових слів псевдокласу :nht-child()

odd - представляє елементи, чиє числове положення в ряді сусідніх елементів є непарним: 1, 3, 5 і т.д.

even - представляє елементи, чиє числове положення в ряді сусідніх елементів є парним: 2, 4, 6 і т.д.

Функціональна нотація псевдокласу: nht-child()

— Представляє елементи, чиє число в ряді сусідніх елементів відповідає шаблону An+B для кожного позитивного цілого числа і нульового значення n , де:

A - цілісний розмір кроку, B - цілечислове зміщення, n - всі негативні цілі числа, починаючи з 0.

Його можна прочитати як An+B елемент списку. A та B цілі числа.

Приклади селектора псевдокласу: nht-child()

tr:nth-child(odd) або tr:nth-child(2n+1) — Непарні рядки HTML-таблиці: 1, 3, 5 і т.д.

tr:nth-child(even) або tr:nth-child(2n) - парні троки HTML-таблиці: 2, 4, 6, і т.д.

:nth-child(7) - Представляє сьомий елемент.

:nth-child(5n) — Представляє елементи 5 [=5×1], 10 [=5×2], 15 [=5×3], і т.д. У результаті формули першим повертається 0 [=5x0], що призводить до невідповідності, оскільки елементи індексуються з 1, тоді як n починає з 0. Спочатку це може здатися дивним, але має більше сенсу, коли B часто більше 0, як у наступному прикладі.

:nth-child(n+7) — Представляє сьомий та всі наступні елементи: 7 [=0+7], 8 [=1+7], 9 [=2+7], і т.д.

:nth-child(3n+4) — Представляє елементи: 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], тощо.

:nth-child(-n+3) — Представляє перші три елементи: [=-0+3, -1+3, -2+3]

p:nth-child(n) — Подає кожен елемент

у групі споріднених елементів. Це вибере самі елементи, як і простий селектор p (хоча з більш високою специфічністю).

p:nth-child(1) або p:nth-child(0n+1) — Представляє кожен

є першим елементом групи. Це теж саме, що й селектор: first-child (має туже специфіку).

p:nth-child(n+8):nth-child(-n+15) — Представляє елемент

з восьмого по п'ятнадцятий у групі елементів.

CSS Селектори псевдоелементів

Селектори псевдоелементів використовуються для стилізації певної частини елемента - ви можете використовувати їх для вставки нового вмісту або зміни зовнішнього вигляду певного розділу вмісту.

Наприклад, ви можете використовувати псевдоелемент, щоб по-різному оформляти першу літеру або перший рядок елемента. Ви також можете використовувати псевдоелементи, щоб додати новий вміст до або після вибраного елемента.

На відміну від псевдокласів, яким передує один символ двокрапки : , псевдоелементам передує два символи двокрапки :: . За символом :: слідує ключове слово, яке дозволяє стилізувати певну частину обраного елемента.

Загальний синтаксис виглядає так:

element::pseudo-element-selector


property:value;

>

Обов'язково використовуйте символ :: замість : під час використання селекторів псевдоелементів — це допоможе відрізнити псевдокласи від псевдоелементів.

Тепер давайте розглянемо деякі з найпоширеніших псевдоелементів, з якими ви зіткнетеся.

Псевдоелемент ::before

CSS ::before створює перший дочірній псевдоелемент вибраного елемента. Часто він використовується для декоративних цілей, додавання вмісту елемента за допомогою властивості content . Він убудований за замовчуванням. Ви можете використовувати його для вставлення вмісту перед елементом:

p::before


property: value;

>

Псевдоелемент ::after

У CSS :: after створює останній дочірній псевдоелемент вибраного елемента.Часто він використовується для декоративних цілей, додавання вмісту елемента за допомогою властивості content . Він убудований за замовчуванням. Ви можете використовувати його для вставлення вмісту після елемента:

p::after


property: value;

>

Псевдоелемент ::first-letter

CSS псевдоелемент ::first-letter застосовує стилі до першої літери першого рядка блокового елемента, але тільки в тому випадку, якщо йому не передує інший контент (наприклад, зображення або вбудовані таблиці).

Ви можете використовувати псевдоелемент ::first-letter для вибору першої літери абзацу, що корисно, коли ви хочете оформити першу літеру певним чином:

p::first-letter


property: value;

>

Псевдоелемент ::first-line

CSS псевдоелемент ::first-line застосовує стилі до першого рядка блокового елемента.

Ефекти ::first-line обмежені довгою та одержимою першого рядка тексту в елементі. Довжина першого рядка залежить від багатьох факторів, включаючи ширину документа та розмір шрифту тексту. ::first-line не діє, якщо перший дочірній елемент, який буде першою частиною першого рядка, є вбудованим елементом рівня блоку, наприклад, вбудованою таблицею.

Ви можете використовувати псевдоелемент ::first-line для вибору першого рядка абзацу:

p::first-line


property: value;

>

Псевдоелемент ::selection

CSS псевдоелемент ::selection застосовує стилі до частини документа, яка була виділена користувачем.

Ви можете використовувати псевдоелемент ::selection , щоб задати колір тексту та фону виділені у параграфі:

p::selection


color: lightblue;

background-color: navy;

>

Висновок

Сподіваюся, ця шпаргалка за найчастіше використовуваними CSS селекторами виявилася вам корисною.

Що робить символ тильда(~) у CSS?

Селектор для img перед яким (в тому ж батьку) є button над яким знаходиться миша.

AAA

http://htmlbook.ru/css/selector/sibling це називається споріднені селектори. Стиль буде застосований до картинки, яка знаходиться на одному рівні з button і йде після нього.

Подібні

Підписатися на стрічку

Для підписки на стрічку скопіюйте та вставте це посилання у вашу програму для читання RSS.

Що робить символ тильду в CSS