【CSS】セレクタについて。

CSSで使われる「#」「>」「$」などの意味とは？

(この☟ブログをまるまる引用しますが、自分用に見やすいように…

https://kredo.jp/media/css-symbol-meaning/)

🐤「,」（カンマ）
→複数の要素を指定する際に利用するセレクタ。
　複数の要素にスタイルを適用したいときに使う。
/*-----なんかこんな感じで-----*/
th,td{
border: 1px solid gray;
background:#dcdcdc;
}
🐤「.」（ドット）
→指定したclass名の要素にスタイルを適用するクラスセレクタ

/*-----↓これCSS-----*/
.あああ{font-weight:bold;}

<!--↓これHTML-->
<label class="あああ">とりのたまご</label>

🐤「#」
→指定したid名の要素にスタイルを適用するIDセレクタ
/*-----↓これCSS-----*/
.あああ{font-weight:bold;}

<!--↓これHTML-->
<label class="あああ">ひよこ</label>

🐤「*」
→すべての要素にスタイルを適用する全称セレクタ
/*-----↓これCSS-----*/
*{color: #2196F3;}

<!--↓これHTML-->
<label class="あああ">とりのたまご</label>
<label class="あああ">ひよこ</label>

→適用する要素の範囲を指定できる。
/*-----↓これCSS-----*/
div *{color: #2196F3;}

<!--↓これHTML-->
<label class="あああ">とりのたまご</label>
<div>
　　<label class="あああ">ひよこ</label>
</div>

🐤「>」
→指定した要素の直下にある要素にスタイルを適用する
　子要素にのみスタイルを適用する

🐤「+」
→指定した要素に隣接する要素にスタイルを適用する
　「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用

🐤「~」
→指定した要素の後にある要素全てに適用する
　「+」よりも適用される範囲が広い

🐤「$」
→要素ではなく属性を指定する際に使用する