Статьи

Непрерывный селектор

Март 21, 2019

Время от времени у меня возникает идея нового селектора CSS , который решает конкретную проблему. Некоторое время назад я подумал о Regex-сопоставлении селектора атрибутов , который сопоставляет значения атрибута в соответствии с регулярным выражением.

Недавно у меня появилась другая идея, вдохновленная проектом, над которым я работал в то время, — то, что я выбрал, чтобы называть Селектор смежных братьев и сестер .

Чтобы проверить, как это работает, давайте начнем с примера HTML- кода, к которому мы можем обратиться по мере продвижения: 

<div>
    <h2>First heading</h2>
    <p>First paragraph</p>
    <p>Second paragraph</p>

    <h3>Second heading</h3>
    <p>Third paragraph</p>
</div>

В настоящее время CSS предоставляет два родственных селектора. Первым из них является селектор смежных братьев и сестер , который выбирает первый родственный элемент указанного типа (или другого выбора), который следует за первым в том же родительском контексте: 

 h2 + p { ... }

Таким образом, в нашем примере HTML он выберет первый абзац, который следует сразу за первым заголовком, но не второй абзац после этого, ни третий, который следует за вторым заголовком.

Затем есть General Sibling Selector , который выбирает все родственные элементы, которые следуют за первым в том же контексте, и поэтому выбирает все три абзаца в примере кода: 

 h2 ~ p { ... }

Между этими двумя крайностями существует третья возможность — он выберет первые два абзаца, но не третий; другими словами, смежные родные братья.

Это может выглядеть так: 

 h2 ~+ p { ... }

Мы могли бы выразить эту ситуацию с помощью этого селектора комбинации: 

 h2 + p, h2 + p + p { ... }

Но, как это часто бывает, это идеально, только когда число вовлеченных элементов мало и известно ; что если бы оно было очень большим — как дюжина или больше элементов? Что делать, если количество элементов было неизвестно, и может составить сотни? Вы могли бы в конечном итоге с селекторами, которые делают этот выглядит компактно: 

 h2 + p,
h2 + p + p,
h2 + p + p + p,
h2 + p + p + p + p,
h2 + p + p + p + p + p,
h2 + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p + p + p + p + p,
h2 + p + p + p + p + p + p + p + p + p + p + p + p { ... }

И именно для этой ситуации у меня возникла идея.

Я хотел чистый CSS- компонент для механизма показа / скрытия разделов технического руководства. Ручная разметка была структурирована как серия заголовков второго уровня, за которыми следовал один или несколько абзацев (как в первой части примера кода, показанного здесь). По умолчанию все параграфы скрыты, поэтому сначала вы видите только заголовки.

Вы просматриваете содержимое, которое следует за каждым, нажимая на заголовок, и это поведение обрабатывается с помощью сценариев. Но вы также можете перейти на страницу с URL-адресом, содержащим хеш, который соответствует идентификатору заголовка, чтобы он сразу переходил к этому разделу, и я хотел, чтобы этот раздел отображался автоматически; например, показать (и только показать) каждый абзац, следующий за конкретным заголовком.

Поскольку каждый раздел мог содержать десятки абзацев, казалось бы, чрезмерно определять это с помощью смежных селекторов-братьев — по одному для каждого возможного абзаца, как громоздкий пример выше. И, конечно же, общий селектор братьев и сестер не будет работать, потому что он выберет все абзацы во всех следующих разделах, а не только целевой раздел.

Так что, в конце концов, я тоже сделал это с помощью сценариев.

Но я не могу не вспомнить, насколько легко было бы, если бы только у меня был этот непрерывный селектор брата: 

 h2 ~+ p { display:none; }

h2:target ~+ p { display:block; }

Миниатюра кредит: Мортимер?

29
Share: