Що означає селектор CSS “~” (tilde / squiggle / twiddle)?

Пошук ~персонажа непростий. Я переглядав деякі CSS і виявив це

.check:checked ~ .content {
}

Що це означає?

Фактично ~селектор є Генеральним комбінатором братів і сестер (перейменованим на наступний комбінататор побратимів у селекторах 4 рівня ):

Загальний комбінатор побратимів складається з символу "тильда" (U + 007E, ~), який розділяє дві послідовності простих селекторів. Елементи, представлені двома послідовностями, поділяють один і той же батьків у дереві документа, а елемент, представлений першою послідовністю, передує (не обов'язково одразу) елементу, представленому другою.

Розглянемо наступний приклад:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b відповідає 4-му та 5-му списку, оскільки вони:

• Є .bелементами
• Є побратимами .a
• З'являються після .aв порядку джерела HTML.

Точно так же, .check:checked ~ .contentвідповідає всім .contentелементам , які є братами і сестрами , .check:checkedі з'являються після нього.

Корисно також перевірити інші комбінатори в сім'ї і повернутися до того , що цей конкретний один.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Приклад контрольного списку:

• ul li- Дивлячись всередині - Вибирає всі ці liелементи розміщені ( в будь-якому місці) всередині ul; Селектор нащадків
• ul > li- Зазираючи всередину - Вибирає лише прямі li елементи ul; тобто він буде вибирати тільки прямі дитина liз ul; Вибір дитини або добірний комбінатор
• ul + ul- Дивлячись назовні - Вибирає ulнегайно наступну ul; Це не дивлячись всередину, а дивлячись назовні безпосередньо на наступний елемент; Прилеглі Sibling Selector
• ul ~ ul- Дивлячись назовні - Вибирає все, ulщо випливає, ulне має значення, де він знаходиться, але обидва ulповинні мати одного батька; Загальний вибір сестри

Той, кого ми дивимося тут, - це генеральний вибір сестер

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

Загальний селектор комбінаторів братів і сестер дуже схожий на сусідній селектор комбінатора сибс. Різниця полягає в тому, що обраний елемент не потребує негайного успіху над першим елементом, але може з’являтися в будь-якому місці після нього.

Більше інформації

Це є General sibling combinatorі пояснюється у відповіді @ Саламана дуже добре.

Те, що я пропустив, те, Adjacent sibling combinatorщо є +і тісно пов'язане з цим ~.

Прикладом може служити

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Відповідає елементам, які є .b
• примикають до .a
• Після .aв HTML

У прикладі вище він буде позначати 2-е, liале не 4-е.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Зауважте, що в селекторі атрибутів (наприклад, [attr~=value]) тильда

Представляє елемент з назвою атрибута attr , значенням якого є розділений пробілом список слів, одним з яких є саме значення .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors