CSSの基本(前回のおさらい)

CSSの基本的な文法は「セレクタ」「プロパティ」「値」でできています
下の画像ではセレクタ「pタグ内の」→プロパティ「文字の色を」→値「グレーにする」という内容になります

便利なセレクタ

それでは前回の続きを始めたいと思います
今回は「見慣れないけど実は便利なセレクタ」を紹介していきます

「*（アスタリスク）」で全要素に対して適用

* {（プロパティ）：（値）；}
全要素に適用されるので、初期設定としてCSSファイルの最初の方（上の行）に書いておくようにしましょう。CSSは後の方（下の行）に書いた方が優先されて適用されるためです

「>」で子要素にのみ適用

◯ > □ {（プロパティ）：（値）；}
「>」は子要素（□要素）のみに適用されるので、同じ階層の他の要素また孫要素には適用されません

「+」で同じ階層のすぐ後ろの要素にのみ適用

◯ + □ {（プロパティ）：（値）；}
「+」は◯要素と同じ階層で、◯要素のすぐ後ろの□要素にのみ適用されます

「~」で同じ階層の後ろのすべて要素に適用

◯ ~ □ {（プロパティ）：（値）；}
「~」は「+」と似ていますが、同じ階層のすぐ後ろの□要素だけでなく、すべての□要素に適用されます

最初の要素だけ適用

◯:first-child {（プロパティ）：（値）；}
リストや表なので最初の要素だけに適用したい時に便利です

最後の要素だけ適用

◯:last-child {（プロパティ）：（値）；}
リストや表なので最後の要素だけに適用したい時に便利です

奇数行だけ適用

◯:nth-child(odd) {（プロパティ）：（値）；}
リストや表なので奇数行目の要素だけに適用したい時に使います

偶数番目だけ適用

◯:nth-child(even) {（プロパティ）：（値）；}
リストや表なので偶数行目の要素だけに適用したい時に使います

n番目だけ適用

◯:nth-child(3n) {（プロパティ）：（値）；}
リストや表なのでn番目の行の要素だけに適用したい時に使います

テキストの最初の文字だけ適用

◯:first-letter {（プロパティ）：（値）；}
テキストがある要素で、テキストの最初の文字だけに適用したい時に使います

◯以外に適用

◯:not(□) {（プロパティ）：（値）；}
少しややこしいですが、□要素だけ適用したくない時に使います
:last-childなどと組み合わせると便利に使えます。

これは、複数指定することもできます。
◯:not(□):not(△){（プロパティ）：（値）；}
CSSを適用したくない□要素と△要素を指定します

属性名を含む要素だけにCSSを適用

◯[属性名]{（プロパティ）：（値）；}
aタグなどで、属性名を含む場合は属性名だけに適用することができます
「id」や「class」も属性になりますが、書き方が異なるので注意しましょう

まとめ

少し複雑でややこしい部分もありますが、個別にCSSを適用したいときに便利だと思います
ぜひ覚えて活用してみてください！