【メモ】CSS設計の基礎の基礎

HTML/CSSはProgate,ドットインストール、Udemyなどでちゃんと学習していたし、
案件もありがたいことに継続的にいただけてたのですが
基礎のCSSセレクタの種類が抜けてるところがあったのでまとめ。

私が覚えてなかったところなので別に全部を集めたわけじゃないです。

【タグとクラスの二重指定】

--- HTML ---

<p>アイウエオ</p>
<p class="example">カキクケコ</p>
<span>サシスセソ</span><br>
<span class="example">タチツテト</span>

--- CSS ---

p.example {
    color: red;
}

上記の記述だと
exampleクラスのついているpタグなので
カキクケコだけが赤になる。

【タグの中から厳選】

--- HTML ---

<p>アイウエオ</p>
<p><span>カキクケコ</span></p>
<span>サシスセソ</span>

--- CSS ---

p span {
    color: red;
}

上記の記述だと
pタグの中のspanに適応されるので
カキクケコだけが赤になる

【隣接セレクタ指定】
--- HTML ---

<p>アイウエオ</p>
<div>カキクケコ</div>
<p>サシスセソ</p>
<p>タチツテト</p>
<p>ナニヌネノ</p>
<p>ハヒフヘホ</p>
<p>マミムメモ</p>

div + p {
  color: red;
}

上記の記述だと
divの下のpにのみ適用されるから
サシスセソだけ赤になる

【複数セレクタ選択】
--- HTML ---

<div>アイウエオ</div>
<p>カキクケコ</p>
<span>サシスセソ</span>

--- CSS ---

div , span {
  color: red;
}

複数選択されるので
アイウエオとサシスセソが赤くなる。

恥ずかしながら
上記のセレクタの違いが曖昧でした…！

これを機に曖昧から抜けるぞ。