cssセレクタについて

①タグ名での指定

html

<p>あいうえお</p>

css

p {
color :red;
}

「p」の部分を「h1」や「span」や「a」などのタグ名cssの方に記載します。
　この場合、class名などのようにセレクタに「.」などを指定する必要はないです。

②class名での指定

html

<p class="first-text">かきくけこ</p>

css

.first-text{
color:blue;
}

class名をセレクタで指定する場合は最初に「.」をつける必要があります。

③id名での指定

html

<p id="sub-text">さしすせそ</p>

css

#sub-text{
    color: green;
}

id名を指定する場合、「#」をセレクタ名の最初に記載する必要があります。

④「a,b」（複数セレクタの指定）

html

  <p>一つ目のセレクタ</p>
<span>二つ目のセレクタ</span>

css

p,span {
  color:orange;

}

この場合は「一つ目のセレクタ」,「二つ目のセレクタ」というように指定します。

また、例えば「pタグ」と「class名」を指定する場合は以下のように先ほど説明したclass名をセレクタ指定するやり方も加えて、セレクタ指定をします。

html

 <p>一つ目のセレクタ</p>
<span class="multiple">二つ目のセレクタ</span>
}

css

p,.multiple{
  color:orange;
}

↑問題なくオレンジ色を指定することができました。

⑤「a b」（絞り込み指定）

絞り込みでセレクタ指定をする場合、◯◯の中の◯◯というように指定をします。

イメージ的には、「３年1組の山田さん」というような形でセレクタを指定をします。
上の例でコードで表すと、「３年1組 山田さん」といったように半角スペースを入れます。

ネット検索で「カレー スパイス」と検索をするような形で指定をするものなのだと、覚えてもらえば大丈夫です。

html

<div class="menu-text">
    <h4>今日の夕飯</h4>
    <p>カレーの材料リスト</p>
    <ul>
      <li>野菜類</li>
    </ul>
    <div>
    <ul>
      <li>にんじん</li>
      <li>玉ねぎ</li>
      <li>じゃがいも</li>
    </ul>
    </div>
  </div>

css

.menu-text li {
  color: limegreen;
}

ここで注意すべきこととしては、1つ下の階層の子要素だけではなく、階層が深くなっても指定した全てのタグに対してcssが適用されます。なので、野菜類のリストが全て黄緑で表示されています。

⑥「a>b」（子要素にのみ指定）

1つ下の階層の子要素のみにcssを適用する場合は、「>」を使用してセレクタ指定します。

html

 <div class="child-text">
    <p>たちつてと</p>
    <a>なにぬねの</a>
    <div>
      <p>はひふへほ</p>
    </div>
  </div>

css

.child-text > p {
  color:blueviolet;
}

⑦「a+b」（隣接セレクタの指定）

指定したセレクタの次の要素のみにcssを指定したい場合には「+」を使うことでセレクタ指定をすることができます。ここでの注意点があり、指定した自身のセレクタはcssでは適用されないという点です。(今回であれば、「.next-text」)

html

<p>らりるれろ</p>
<p class="next-text">あいうえお</p>
<p>がぎぐげご</p>
<p>だぢづでど</p>

css

.next-text + p {
color:blue;
}

⑧「a~b」（同じ階層の後ろに並ぶ要素に指定）

同じ階層の、後ろに並ぶ要素すべてにcssを指定したい場合は、「~」を使用して指定します。

階層が違ったり、同じ階層でも違うタグの場合はcssは指定されません。

ここでも注意点があり、指定した自身のセレクタはcssでは適用されないという点です。
(今回であれば、「.after-text」)

html

<p>あいうえお</p>
<p class="after-text">かきくけこ</p>
<p>たちつてと</p>
<p>なにぬねの</p>
<a>まみむめも</a>
<div>
  <p>はひふへほ</p>
</div>

css

.after-text ~p {
color:blue;
}

⑨ アスタリスク（全要素に対する指定）

すべての要素(bodyに書かれたもの全て)に対してcssを指定したい場合は、「*」を指定します。

html

<p>あいうえお</p>
<a>さしすせそ</a>
<p>たちつてと</p>
<p>なにぬねの</p>
<a>まみむめも</a>
<div>
  <p>はひふへほ</p>
</div>
<h3>らりるれろ</h3>

css

* {
color:aqua;
}