Day ６-CSS入門セレクター編

★本日の学習成果まとめ

・＊は全称セレクターで、すべての要素に動作させることができる。
・classの値は小文字の英数字で、数字を先頭にしない。また、classは複数設定できる。
・javascriptで個別のものに動きをつけたいときはid属性を使用して使うことが多い。id属性は一つしかつけれない。
・[]の中に属性を指定して、属性が被るときは"属性名"まで記載すれば個別に動作させることができる。
・セレクターリストで同じ動作をさせたいやつを合わせてコードを書くことができる。h1 , p {}のように。
・親要素、子要素、孫要素がある。親要素内の子要素に動作させたり、親要素内の子孫要素すべてに動作させたりすることができる。class属性とできることは一緒だが少し便利になる。
・nth-childを使って何番目の要素に動作。みたいなこともできる。ただし、htmlやbodyも数に含めるため、動作してほしくないところも動作する。
・ユーザー操作で動作を変える設定が多くある。:hoverとか::activeとか多数。都度ググろう。
・:not()で含まないものに設定することもできる。使わない。
・::before,::afterを使えば要素内の前後に動作させることができる。conttentsを使えば文字も入力できるため、複数登場する文字にはCSSで入力するのもありか・・・
♦改めて、暗記するのは難しいと思った。ググる力・単語を覚えることでわからない時でもググることで解決する必要があるんだなと思った。

★備忘録ノート

・CSSにはセレクターが数多くあり、ｐやｈ1を指定する要素セレクターやclassを指定してそれに対するクラスセレクターなどがある。

・全称セレクターとして
```
*{
margin: 0;
}
```
としたときに、すべての要素に対して動作する。また、box-sizing:border-box;としてすべての要素でwigthとheightを設定することをよく使う。

・class属性の値は好きにしていいが、Googleがルールを決めている。小文字で-で単語を区切る。conntents-boxみたいな感じ。また、数字を先頭にしてはいけない。

・classセレクターは複数設定できるため、設定が重複するものは別のclassを設定し、まとめて変更できるようにしておいたほうが効率がいい。

・class属性とid属性はclass属性を頻繁に使う。なぜなら、id属性は複数つけることができないため使い勝手が悪い。ただし、javascriptで動きをつけたいときはid属性を頻繁に使うらしい。

・属性セレクター
[]内で属性を指定することでその属性のみに装飾をすることができる。また、属性が同じ場合はさらに詳細に指定することで個別に装飾することができる。
```
HTMLコード
<input type="text">
<input type="password">
CSSコード
[type="password"]{
border-color: blue;
}
```
とすることでpasswordのみに実行可能。

・複合セレクターとして、条件を複合して指定できる。div要素のboxクラスだけを指定したい場合は、
```
div.box{
```
にて指定することができる。例えば、input要素で入力されていないものだけに赤くするのとかをこれでできそうな気がする・・・

・セレクターリストとは、2種類以上の要素を同時に選択できるというメリットがある。要素だけでなくて属性も選択できるという万能なやつ。

・子孫要素とかいうやつが便利。
```
section > p　これでsectionの子供要素のpに対してのみ動作。
section p これでsectionの子孫要素のpすべてに対して動作。
```
ただし、classとやってることは一緒。いろんなやり方があることは理解できたが、どれがいちばんつかうんだろう・・・

・疑似クラスとは要素の何番目に動作させるかを指定するもので、3番目に動作させたいのであれば、
```
nthchild(3){}
```
で動作を指示すれば、3番目に対して無条件で動作する。ただし、動作してほしくないと頃にも動作しやすいので、基本要素と組み合わせて使うことが多い。

・ユーザー操作によって動作をかえることができる。
:hover＝マウスがホバーした時だけ動作する
:focus＝マウスで選択したときのみ動作する
:active＝クリックしたときのみ動作る
種類たくさんありそうでおぼえるのは不可能。都度ググろう。

・not属性を使えば特定のクラスを含まないものを選択して、動作させることができる。あまり使わないらしい。

・::before,::afterを使えば、要素の文字の前や後に動作を加えることができる。HTML内に書いておけばできることではあるが、後に変更したいときにすべての要素に変更するよりCSSで一括変更できるから便利。

・優先度は解説があったが、慣れだと思う。また、HTMLの要素内にstyleを使えば優先度が最優先になる。また、非推奨だが!importantを使えば何よりも優先されるとのこと。