можно "синтезировать следующий тип"?

Question

Столкнулся с ситуацией, использующей большие сетки смешанных типов элементов, где было бы неплохо иметь :next-of-type в качестве псевдокласса.Мое определение этого будет следующим родным братом того же типа, что и элемент, выбранный селектором, к которому добавляется :next-of-type.(Полагаю, было бы неплохо иметь :next-child, :next-of-class и т. Д. И «Пре-ребенок», «Пре-тип», «Пре-класс» и т. Д.)

Не удалось найтитакая вещь в документации CSS, так что я думаю, что она не существует.Я потратил некоторое время, пытаясь синтезировать его из того, что существует, и потерпел неудачу.

Не уверен, что это разрешимо, может быть, только рабочими группами W3 CSS ...

Как пример, предположим, у вас есть большая сетка элементов.Для простоты я просто буду использовать два в этом примере, но в моем реальном случае есть десяток или более различных типов элементов.Я перечислю содержимое элементов в том порядке, в каком они существуют в HTML, но из-за алгоритмов размещения сетки (здесь не показано) элементы могут фактически не отображаться в другом порядке, чем в HTML.Тем не менее, последовательность элементов в HTML представляет интерес для плана выбора.Я буду использовать <a-> и <b-> для (пользовательских) элементов.

<div style="display: grid;">
     <a->1</a->
     <a->2</a->
     <b- class="special">3</b->
     <a->4</a->
     <a- class="ordinary">5</a->
     <a- class="surprise">6</a->
     <b->7</b->
     <b->8</b->
     <a->9</a->
</div>

Так что было бы неплохо иметь способ указать .special:next-of-type и выбрать пункт 7, .ordinary:next-of-type будетвыберите пункт 6, и .surprise:next-of-type выберет пункт 9.

Answer 1

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

Фрагмент ниже касается только двух типов элементов и максимум 5 элементов между элементами одного типа, но, очевидно, может быть кропотливо расширен в любом измерении.

      .container {
        display: grid;
        font-size: 30px;
        grid-template-areas:
          ". . ."
          ". . ."
          ". . .";
      }
      .special ~next-of-type { color: red; }
      a-.special + a- { color: red; }
      a-.special + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      b-.special + b- { color: red; }
      b-.special + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }

      .ordinary ~next-of-type { color: blue; }
      a-.ordinary + a- { color: blue; }
      a-.ordinary + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      b-.ordinary + b- { color: blue; }
      b-.ordinary + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }

      .surprise ~next-of-type { color: orange; }
      a-.surprise + a- { color: orange; }
      a-.surprise + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      b-.surprise + b- { color: orange; }
      b-.surprise + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }

    <h1>next-of-type synthesized</h1>
    <div class=container>
     <a->1</a->
     <a->2</a->
     <b- class="special">3</b->
     <a->4</a->
     <a- class="ordinary">5</a->
     <a- class="surprise">6</a->
     <b->7</b->
     <b->8</b->
     <a->9</a->
    </div>

Спасибо BoltClock за то, что он сказал, что это невозможно, и другие полезные комментарии, которые привели меня к этому решению.

Answer 2

Чтобы развернуть мои комментарии:

По сути, псевдоклассы, которые соответствуют элементам "next" и "previous", будут соответствовать элементам, отличным от того, который представлен каким-либо составным селектором, к которому вы "присоединяете" их, ипоэтому не будет совместимо с определением CSS «псевдокласс» или «простой селектор» / «составной селектор».

Селекторы L4 описывает простые селекторы и составные селекторы как условия соответствияодновременно против одного элемента.По этому определению селектор типа .special:next-of-type будет работать только в том случае, если следующий элемент этого типа также соответствует .special.Затем он будет совпадать рекурсивно, в результате чего получится все .special ~ .special, кроме первого каждого типа элемента в каждом родительском элементе.Критически, это не будет работать вообще в вашем случае, так как пункт 7 не соответствует .special.

Человек, читающий этот селектор, мог бы интуитивно понять, что он делает, но он все еще не сочетается с селекторомсинтаксис, потому что для его работы вам нужно определить :next-of-type как специальный псевдокласс, который игнорирует или сопоставляет отдельно от остальной части составного селектора, в отличие от того, как это было определено в спецификации.Это означает дополнительную сложность для алгоритмов выбора селектора.Подобную сложность можно наблюдать в семействе селекторов jQuery :eq() - вероятно, есть веская причина, по которой эти селекторы не стандартизированы.

Кроме того, что-то вроде :next-of-type не являетсяусловие для элемента, но установление связи между этим элементом и некоторым другим элементом.В селекторах отношения между двумя или более различными элементами представлены с помощью комбинаторов.Комбинатор «следующий родной тип» облегчил бы выполнение этой задачи без фундаментального изменения принципа соответствия селектора (например, .special ~~ *), но его нет ни в одной спецификации селекторов, и я не вижу вариантов использования, таких как этотодин достаточно распространенный для CSSWG, чтобы оправдать его разработку, тестирование и реализацию.А без такого комбинатора вам нужно было бы заранее знать тип элемента, чтобы определить следующего брата этого типа, а это невозможно сделать с помощью доступных сегодня селекторов, даже не включая L4 :nth-child(An+B of S).

Таким образом, ответ на

может быть синтезирован ": следующего типа"?

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