как настроить таргетинг на два элемента одновременно в css - PullRequest
Новая
       12

как настроить таргетинг на два элемента одновременно в css

0 голосов
/ 13 апреля 2020

это мой код 

.tgt:nth-of-type(1):target~ol li:nth-of-type(1),
.tgt:nth-of-type(2):target~ol li:nth-of-type(2),
.tgt:nth-of-type(3):target~ol li:nth-of-type(3),
.tgt:nth-of-type(4):target~ol li:nth-of-type(4),
.tgt:nth-of-type(5):target~ol li:nth-of-type(5) {
  border: 1px solid red;
}
<span id="item1" class="tgt"></span>
<span id="item2" class="tgt"></span>
<span id="item3" class="tgt"></span>
<span id="item4" class="tgt"></span>
<span id="item5" class="tgt"></span>

<ol>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ol>

Я хочу изменить что-то вроде 

<html>
  <head>
    <style type="text/css">
        .tgt:nth-of-type(n):target ~ ol li:nth-of-type(n){
         border: 1px solid red;
          } 
    </style>
  </head>

  <body>
  </body>
</html>

Так что я могу выбрать линию только с одним стилем css. Я имею в виду, я хочу ездить на пяти линиях. Я хочу использовать только одну строку вместо десяти.

...