Natknąłem się na sytuację przy użyciu dużych siatek mieszanych typów elementów, gdzie byłoby miło mieć :next-of-type jako klasa pseudo. Moja definicja tego byłaby kolejnym rodzeństwem, który jest tego samego typu, co element wybrany przez selektora, do którego zostanie dołączona :next-of-type. (Przypuszczam, że będzie też miło mieć :next-child, :next-of-class, :next-of-class itp.

Nie można znaleźć czegoś takiego w dokumentacji CSS, więc chyba nie istnieje. Spędziłem trochę czasu, próbując go zsyntetyzować z tego, co istnieje i nie powiodło się.

Nie jestem pewien, czy jest to solvable, może tylko przez grupy robocze W3 CSS ...

Jako przykład zakładasz, że masz dużą siatkę elementów. Dla prostoty, będę po prostu użyć dwóch w przykładzie, ale mój rzeczywisty przypadek ma kilkanaście lub więcej różnych typów elementów. Będę numerować treści elementów w kolejności, w jakiej istniałyby w HTML, ale ze względu na algorytmy umieszczania sieci (nie wykazane tutaj) przedmioty mogą nie pojawić się w innej kolejności niż w HTML. Niemniej jednak, sekwencja przedmiotów w HTML jest interesująca dla planu wyboru. Użyję <a-> i <b-> dla elementów (niestandardowych).

<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>

Byłoby więc miło mieć sposób na określenie .special:next-of-type i wybierz pozycję 7, .ordinary:next-of-type wybrałby pozycję 6, a {x2}} wybrałby pozycję 9.

0
Victoria 26 luty 2019, 12:38

1 odpowiedź

Najlepsza odpowiedź

Jest więc możliwe, ale oprócz poznawania pełnej listy typów elementów w sieci i maksymalnej rozpiętości elementów między elementami tego samego typu, byłoby naprawdę przydatne, aby mieć makro-procesor do generowania syntetyzacji rozwiązanie.

Fragment poniżej dotychczasowych dotyczy tylko dwóch typów elementów i maksymalnie 5 elementów między elementami tego samego typu, ale można oczywiście być w każdym wymiarze.

      .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>

Dzięki belkclock za to, że nie było możliwe, a inne przydatne komentarze, które doprowadziły mnie do tego rozwiązania.

0
Victoria 27 luty 2019, 23:37