Css他の要素をクリックして要素の色を変更してください

Question

ページングがあります 他のリンクをクリックするとpagination__linkの背景をテキスト「左」に変更するにはどうすればよいですか？ CSSのみを使用する必要があります。

Answer 1

あなたはこれを行うことができますが、率直に言えば、CSSフレキシブルボックスと比較的新しい:focus-within擬似クラスを使用すると面倒です。

.pagination { 
 
    /* sets the display to use the flex layout: */ 
 
    display: flex; 
 
    /* ensures the contents of the <ul> are shown in 
 
    columns and in reverse-order: */ 
 
    flex-direction: column-reverse; 
 
} 
 

 
/* selects first the <li> that has a focused element 
 
    within it, then finds all subsequent <li> elements, 
 
    using the general-sibling combinator ('~') that 
 
    also matches the :last-child pseudo-class (there can, 
 
    obviously, be only one) then finds the <a> element(s) 
 
    which is a child of that <li> element: */ 
 
li:focus-within ~ li:last-child > a { 
 
    background - color: red; 
 
}

<ul class="pagination"> 
 
    <li class="pagination__item pagination__item--active"> 
 
    <a class="pagination__link" href="#"> 
 
     Page 2 
 
    </a> 
 
    </li> 
 
    <li class="pagination__item"> 
 
    <a class="pagination__link" href="#"> 
 
     Page 1 
 
    </a> 
 
    </li> 
 
    <li class="pagination__item"> 
 
    <a class="pagination__link" href="#"> 
 
      left 
 
     </a> 
 
    </li> 
 
</ul>

External JS Fiddle demo：しかし、これは<ul>内<li>要素の順序を逆転させる必要がありません。

参考文献：

• :focus-within。
• flex-direction。
• General Sibling Combinator (~)
• 「Using CSS Flexible Boxes」（MDN）。

Answer 2

input[name="radio"]{ 
 
    display: none; 
 
} 
 
label{ 
 
    text-decoration: underline; 
 
    color: blue; 
 
} 
 

 
input[name="radio"]:checked + label{ 
 
    background-color: yellow; 
 
}

<ul class="pagination"> 
 
    <li class="pagination__item"> 
 
    <input type="radio" id="radio1" name="radio" /> 
 
    <label for="radio1">left</label> 
 
    <!-- 
 
    <a class="pagination__link" href="#"> 
 
     left 
 
    </a> 
 
    --> 
 
    </li> 
 
    <li class="pagination__item"> 
 
    <input type="radio" id="radio2" name="radio" /> 
 
    <label for="radio2">Page1</label> 
 
    <!-- 
 
    <a class="pagination__link" href="#"> 
 
     Page 1 
 
    </a> 
 
    --> 
 
    </li> 
 
    <li class="pagination__item pagination__item--active"> 
 
    <input type="radio" id="radio3" name="radio" /> 
 
    <label for="radio3">Page1</label> 
 
    <!-- 
 
    <a class="pagination__link" href="#"> 
 
     Page 2 
 
    </a> 
 
    --> 
 
    </li> 
 
</ul>

多分それはあなたが望む答えではないのです。

しかし、私はそれがあなたの問題のための良いヒントかもしれないと思う。

チェックボックスのトリックまたはラジオのトリックを使用できます。