LoginSignup
5
0

CSSセレクター

Last updated at Posted at 2024-01-05

はじめに

新入社員教育でウェブ開発について学習しています。
今回は学習の中で複雑だと感じた、
CSSセレクターの種類や記述方法についてまとめました。

CSSとは

CSS(Cacading Style Sheets)とは、
Webページ内の文字(テキスト)、画像や動画の幅、余白を指定したり、
それぞれの表示箇所を指定してレイアウトを決めたりするプログラミング言語です。

app.css
h1 {
    color:green;
}

CSSの構成要素

image.png

cssの記述は

  • セレクタ(どの要素?)
  • プロパティ(なにを?)
  • 値(どんな風に?)
    の3つの要素でできている。

「h1」がCSSセレクターに相当し、
h1{・・・}と記載することでh1タグで囲った要素のみスタイルを指定させています。

〇〇{・・・}の〇〇部分をCSSセレクターと呼びます。

セレクターの種類

区分 セレクタの種類 説明 記述例
基本 全称セレクタ すべての要素を対象にします。 *
基本 要素型セレクタ h1のようなタグで記述する要素を
対象にします。
h1
基本 IDセレクタ ID指定した要素を対象にします。 #test
基本 クラスセレクタ クラス指定した要素を対象にします。 .test
基本 属性セレクタ 指定した属性を持つ要素を対象にします。 h1[id]
基本 疑似クラス マウスが上にある時や最初の要素など
特定状態の要素を対象にします。
a:hover
基本 疑似要素 最初の行や文字など、
要素内の特定の場所を対象にします。
p::first-line
結合 グループ化セレクタ 複数の要素をまとめて(グループにして)
対象にします。
h1, p
結合 小孫結合子 特定の親要素を持つ子要素や孫要素を
対象にします。
div p
結合 子結合子 特定の親要素を持つ子要素だけを
対象にします。
div > p
結合 隣接兄弟結合子 同じ階層にある次の要素を対象にします。 h1 + p

CSSで複数のclass名を指定(結合)

  1. class名を「 , ( カンマ ) 」で区切る
  2. class名を「 ( 半角スペース ) 」で区切る
  3. class名を繋げて記述
  4. class名を「 + ( プラス ) 」で区切る
  5. class名を「 > ( 大なり記号 )」で区切る

HTMLは以下のものを使用します。

index.html
 <div class="parent1">
     <p class="p1 child1">子要素A</p>
     <p class="child2">子要素B</p>
     <p class="child3">子要素C</p>
 </div>
   <div class="parent2">
     <p class="child1">子要素D</p>
     <div class="child2">
         子要素E
         <p class="grandchild">子孫要素e</p>
     </div>
   </div>

1. class名を「 , ( カンマ ) 」で区切る

css
.child1,.child2 {
 color: red;
}

【結果】
image.png

class名がchild1とchild2の要素の文字が赤くなる

2. class名を「 ( 半角スペース ) 」で区切る

css
.parent2 .child1 {
 color: red;
}

【結果】
image.png

parent2を親要素に持つchild1が適用範囲となる

3. class名を繋げて記述

css
.p1.child1 {
 color: red;
}

【結果】
image.png

class名にp1とchild1の両方がある要素のみが適用範囲となる

4. class名を「 + ( プラス ) 」で区切る

css
.child2 + p {
  color: red;
}

【結果】
image.png
child2と同じ階層の、すぐ後のp要素にだけ適用される

5. class名を「 > ( 大なり記号 ) 」で区切る

css
.parent2 > p {
  color: red;
}

【結果】
image.png
parent2の、1つ下の階層にあるp要素を指定する

参考

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0