コーディングをするのにCSSでデザインやレイアウトを作っていきますが、その時に絶対必要なのが何処に指定するのか？だと思います。色を付けたいと思っても指定する方法が分からないとできないので、良く使う方法を画像を見ながら思い出せるように書いていきます。
くまセレクタってなんだっけ？
CSSの基本の書き方
- どこに（セレクタ）
- なにを（プロパティ）
- どうする（値）
CSSを書くのに、この３つが必要ですが今回は「どこに」の部分の方法を書いていきます。
超超基本のセレクタ
| 指定方法 | 書き方 | 説明 |
|---|---|---|
| タグ | p { 〜 } | htmlタグ名 |
| class | .class-name { 〜 } | ※class名の前に「 . 」ドットを付ける |
| id | #id-name { 〜 } | ※id名の前に「 # 」シャープを付ける |
| 複数 | div , h2 , p { 〜 } | 指定場所の後に「 , 」カンマで区切る |
| 指定方法 | 書き方 |
|---|---|
| タグ | p { 〜 } |
| class | .class-name { 〜 } ※class名の前に「 . 」ドットを付ける |
| id | #id-name { 〜 } ※id名の前に「 # 」シャープを付ける |
| 複数 | div , h2 , p { 〜 } 指定場所の後に「 , 」カンマで区切る |
よく使うセレクタ
※ 画像のCSSのプロパティは「background-color」になってますが、右のツリー画像はセレクタが効果がある場所に赤枠が付くだけになってます。
子孫要素
孫要素のも効果あり
直下の子要素
子要素だけが対象で、孫要素は対象外
兄弟要素
指定した要素より後に出てくる同じ階層の兄弟要素
上の画像の場合「h2」の兄弟の「p」なので、孫要素の「p」の兄弟には影響しない
隣の要素
指定要素の隣の要素を指定する。
すぐ隣じゃないと効果が無いので注意！
兄弟要素の最初の要素
上画像の場合、sectionの最初の子要素はh2なので効果は無し。pは２番目で最初の子要素ではないので、効果はありません。孫要素の中ではdivの中で最初の子要素はpなので効果があります。
最初の指定要素では無く、一番最初に指定要素が来てないとダメなので注意！
兄弟要素の最後の要素
上画像の場合、sectionの最後の子要素はdivなので効果は無し。pは最後から２番目で最後の子要素ではないので、効果はありません。孫要素の中ではdivの中で最後の子要素はpなので効果があります。
最後の指定要素では無く、一番最後に指定要素が来てないとダメなので注意！
兄弟要素がない要素
別のタグでも兄弟要素があれば効果はない。上画像では孫要素にh3は１つしかないけど、兄弟要素にpがあるので効果がない。
最初の子要素
最初に出てくる子要素。階層が変われば、その中で最初に出てくる子要素
「 :first-child 」と違い子要素の一番最初に無くても効果あり。
最後の子要素
最後に出てくる子要素。階層が変われば、その中で最後に出てくる子要素
「 :last-child 」と違い子要素の一番最後に無くても効果あり。
兄弟要素で要素が１つの時
兄弟要素があっても、同じタグがなければ効果有り。上の画像でclass=”box-2″の子要素は２つあるけど「p」は１つしか無いので効果有り。
〇〇番目の子要素
（ ）の中に指定したい数字を半角入力する。
孫要素がある場合、子要素と孫要素それぞれの◯番目指定になる
後ろから〇〇番目の子要素
（ ）の中に指定したい数字を半角入力する。
孫要素がある場合、子要素と孫要素それぞれの◯番目指定になる
奇数の子要素
数字を入れる（ ）の中に「 odd 」と入れると奇数の要素を指定
孫要素は別でカウント。複数の孫要素がある時は、それぞれ同じ兄弟要素でカウントする。
偶数の子要素
数字を入れる（ ）の中に「 even 」と入れると偶数の要素を指定
孫要素は別でカウント。複数の孫要素がある時は、それぞれ同じ兄弟要素でカウントする。
倍数の子要素
何番目かを指定する（ ）の中に何倍にするかの数字を書いて後ろに「 n 」を付ける
孫要素は別でカウント。複数の孫要素がある時は、それぞれ同じ兄弟要素でカウントする。
一文字目
文章の１文字目だけに効果を付ける
ブロック要素にしか効果はないので注意
全ての要素
「 * 」
要素の前後
「 before 」で前に、「 after 」で後ろに追加
before・afterの時は「 : 」が２つなので注意「 :: 」
