隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

css

2021-01-24

隣接セレクタ・間接セレクタ・直下セレクタとは?

隣接セレクタ
要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。
間接セレクタ
要素を結合子「~」でつなぎます。例えば要素A~要素Bの場合、要素Aと同じ親に含まれる要素Bにスタイルがつきます。
直下セレクタ
要素を結合子「>」でつなぎます。例えば要素A>要素Bの場合、要素Aの直下の要素Bにスタイルがつきます。

隣接セレクタ・間接セレクタ・直下セレクタの使用例

  • <ul class="selector-sitemap">
      <li class="menu01">会社紹介
        <ul class="sub-menu01">
          <li class="child" id="child01">理念</li>
          <li class="child">会社概要</li>
          <li class="child">沿革</li>
        </ul>
      </li>
      <li class="menu02">サービス
        <ul class="sub-menu02">
          <li class="child" id="child02">販売</li>
          <li class="child">営業</li>
          <li class="child">製造</li>
        </ul>
      </li>
      <li class="menu03">お問い合わせ
        <ul class="sub-menu03">
          <li class="child pc">メール</li>
          <li class="child">電話</li>
          <li class="child">FAX</li>
          <li class="child pc">LINE</li>
        </ul>
      </li>
    </ul>

     

  • <style>
    /*隣接セレクタ*/
    #child01 + .child {
      color:red;
      font-weight:bold;
    }
    /*間接セレクタ*/
    #child02 ~ .child {
    color: #fff;
    background: #bfbfbf;
    padding: 1px 10px;
    text-align:center;
    }
    /*直下セレクタ*/
    .menu03 > .sub-menu03 .pc  {
      border-bottom:1px dashed #ccc;
      font-weight:bold;
    }
    </style>

     

-css

関連記事

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。