隣接・間接セレクタ等

<!--html -->
<div id="wrapper">
  <input type="checkbox" id="navTgl">

  <label for="navTgl" class="open">≡</label>
  <label for="navTgl" class="close"></label>
  <nav class="menu">
    <h2>menu</h2>
    <ul>
      <li><a href="#article1">なつかしくってあったかい、きりぎりす。</a></li>
      <li><a href="#article2">透明ノイズと紙テクスチャ。</a></li>
      <li><a href="#article3">Webサイトの作り方のまとめ！ブラウザチェック。</a></li>
      <li><a href="#article4">Photoshopのシェイプでできること。</a></li>
      <li><a href="#article5">CSSだけでスライドショーはつくれるよ。</a></li>
      </ul>
  </nav>

間接セレクタ

checkedがついた要素の後ろにある.closeに対しての操作。前にある.closeには影響を及ぼさない。

/*css*/
#navTgl:checked ~ .close {
	pointer-events: auto;
	background-color: rgba(0,0,0,.3);
}

隣接セレクタ

checkedがついた要素の隣の.openのみに対して行う処理。

/*css*/
#navTgl:checked + .open {
	background-color: indianRed;
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}

例文引用元：→こちら

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>