2022

CSS

【備忘録】CSSセレクター、結合関連の書き方をまとめてみた。

CSS

CSSのセレクター要素の使い方、組み合わせが覚えられない。。。

なので備忘録として記事を書くことにします。

本記事の内容

CSSのセレクター要素の組み合わせ

本記事を対象とする方

Webデザイナー
フロントエンドエンジニア

この記事を書いている僕はプログラミング歴2年4ヶ月です。webエンジニアとして”社内転職”しました。

全部の要素に適用

直下の階層の子要素に適用

兄弟要素(+,~)

:first-childと:first-of-childの違い

属性セレクター

全部の要素に適用


      
        section > * {
          /* sectionの子要素全部に適用 */
          color:red;
        }


      この設定は以下のようになります
      
        <section>
          <p>適用される</p>
          <div>適用される</div>
          <div>
            <p>適用される</p>
            <ul><li>適用される</li></ul>
          </div>
        </section>


      
        section > * + * {
            /* sectionの最初の子要素以外全部に適用 */
            color: red;
          }


      この設定は以下のようになります
      
        <section>
          <p>適用されない</p>
          <div>適用される</div>
          <div>
            <p>適用される</p>
            <ul><li>適用される</li></ul>
          </div>
        </section>

直下の階層の子要素に適用


      
        section > div {
          /* sectionの直下の階層のdivに適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div>適用される</div>
          <section>
            <div>適用されない</div>
          </section>
          <div>
            <section>
              <div>適用される</div>
              <p>適用される</p>
            </section>
          </div>
          <p>適用されない</p>
        </section>

兄弟要素(+,~)


      
        section > div + p {
          /* sectionの直下の階層のdivの隣のpに適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div>適用されない</div>
          <p>適用される</p>
          <p>適用されない</p>
          <p>適用されない</p>
          <p>適用されない</p>
          <p>適用されない</p>
          <div>
            <p>適用されない</p>
          </div>
        </section>


      
        section > div ~ p {
          /* sectionの直下の階層のdivの隣のpに適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div>適用されない</div>
          <p>適用される</p>
          <p>適用される</p>
          <p>適用される</p>
          <p>適用される</p>
          <p>適用される</p>
          <div>
            <p>適用されない</p>
          </div>
        </section>

first-childとfirst-of-typeの違い

first-child


        
          section > p:first-child {
            /* section直下の階層にある、最初の要素に適用 この例では最初の要素がpだったら適用 */
            color: red;
          }


        この設定は以下のようになります
        
          <section>
            <p>適用される</p>
            <div>適用されない</div>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <div>
              <p>適用されない</p>
              <p>適用されない</p>
            </div>
          </section>


        最初の要素がpじゃないと適用されない
        
          <section>
            <div>適用されない</div>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <div>
              <p>適用されない</p>
              <p>適用されない</p>
            </div>
          </section>


        
          section p:first-child {
            /* sectionの子孫階層毎の、最初の要素に適用 この例では最初の要素がpだったら適用*/
            color: red;
          }


        この設定は以下のようになります
        
          <section>
            <p>適用される</p>
            <div>適用されない</div>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <div>
              <p>適用される</p>
              <p>適用されない</p>
              <div>
                <p>適用される</p>
                <p>適用されない</p>
                <div>
                  <div>適用されない</div>
                  <p>適用されない</p>
                </div>
              </div>
            </div>
          </section>

first-of-type


        
        section > p:first-of-type {
          /* sectionの直下階層の、最初のp要素に適用 */
          color: red;
        }


        この設定は以下のようになります
        
          <section>
            <div>適用されない</div>
            <p>適用される</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <div>
              <p>適用されない</p>
              <p>適用されない</p>
            </div>
          </section>


        
        section p:first-of-type {
          /* sectionの子孫階層毎の、最初のp要素に適用 */
          color: red;
        }


        この設定は以下のようになります
        
          <section>
            <p>適用される</p>
            <div>適用されない</div>
            <p>適用されない</p>
            <p>適用されない</p>
            <p>適用されない</p>
            <div>
              <p>適用される</p>
              <p>適用されない</p>
              <div>
                <p>適用される</p>
                <p>適用されない</p>
                <div>
                  <div>適用されない</div>
                  <p>適用される</p>
                </div>
              </div>
            </div>
          </section>

属性セレクター


      
        section > a[class] {
          /* section直下の階層にあり、クラス属性を持つa要素に適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <a class="link" href="#">適用される</a>
          <a href="#">適用されない</a>
        </section>


      
        section > a[href="https://example.com"] {
          /* section直下の階層にあり、href属性が“https://example.com”と完全一致するa要素に適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <a href="https://example.com">適用される</a>
          <a href="https://example.co.jp">適用されない</a>
        </section>


      
        section > div[class~="hoge"] {
          /* section直下の階層にあり、hogeクラスを持つdivに適用 ただし空白で区切られた別のクラスが設定されている場合はその要素にも適用 */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div class="hoge">適用される</div>
          <div class="sudo">適用されない</div>
          <div class="hoge sudo">適用される</div>
        </section>


      
        section > div[class|="hoge"] {
          /* section直下の階層にあり、hogeクラスを持っているdiv、またはhogeの直後にハイフンが続く値で始まるクラス属性を持つdivに適用  */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div class="hoge">適用される</div>
          <div class="sudo">適用されない</div>
          <div class="hoge-sudo">適用される</div>
        </section>


      
        section > div[class^="c"] {
          /* section直下の階層にあり、cで始まるクラスを持っているdivに適用  */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div class="css">適用される</div>
          <div class="scss">適用されない</div>
        </section>


      
        section > div[class$="s"] {
          /* section直下の階層にあり、sで終わるクラスを持っているdivに適用  */
          color: red;
        }


      この設定は以下のようになります
      
        <section>
          <div class="css">適用される</div>
          <div class="scss">適用される</div>
        </section>


      
        section > div[class*="c"] {
          /* section直下の階層にあり、文字列のどこかにcを含んでいるdivに適用  */
          color: red;
        }


      
        <section>
          <div class="css">適用される</div>
          <div class="scss">適用される</div>
        </section>

今回のまとめ

今回はCSS セレクター要素の使い方、組み合わせについて紹介しました。最後まで読んで頂きありがとうございました。

prev page next page

TASK_BLOG by elon task

OSSANS Project since 2020

【備忘録】CSSセレクター、結合関連の書き方をまとめてみた。

全部の要素に適用

直下の階層の子要素に適用

兄弟要素(+,~)

:first-childと:first-of-childの違い

属性セレクター

全部の要素に適用

直下の階層の子要素に適用

兄弟要素(+,~)

first-childとfirst-of-typeの違い

first-child

first-of-type

属性セレクター

今回のまとめ

関連記事

【CSS】margin？position？要素の中央寄せで使うプロパティとは？

コード量激減！ブレイクポイントなしでレスポンシブ対応してみた【メリットしかない！】

CATEGORY カテゴリー別最新記事