【概要】
1.属性・セレクタとは何か
2.CSSの属性セレクタの書き方
3.ここから学んだこと
1.属性・セレクタとは何か
属性：
タグの中の要素と一緒に含まれており、要素に情報を付け加える役割をもちます。属性に名前がついているものが”属性値”と言われます。
セレクタ：
CSSで使う言葉で、どのHTMLの属性に適用するかを示す役割です。
なのでclass属性とclassセレクタの違いは、
class属性は”HTML”、classセレクタは”CSS"を示しています。
例
<linkrel="stylesheet"href="abc.css><>:タグlink:要素rel,href:属性stylesheet,abc.css:属性値2.CSSのセレクタの書き方
では実際に、CSSをHTMLに反映する仕方をここに記載します。意外と知らないやり方もあるかもしれません。
❶-(1)要素に反映する
div{color:red;}".（ピリオド）"無しで反映できます。
❶-(2)要素の複数に反映する
div.name,div.gender{color:red;}<divclass="name"></div><divclass="gender"></div>に反映します。
❷-(1)一部分の名前に反映
.name{color:red;}"name"がついている属性は全て反映されます。<divclass="A name"></div><divclass="B name"></div>に適用されますまた*.name{color:red;}でも同じ意味になります。
❷-(2)一部分の名前に反映（要素）
前方一致div[class^="na"]{color:red;}後方一致（スペース、ハイフンがあっても後方一致の意味であれば反映）div[class$="me"]{color:red;}"m"が入っていれば一致（スペース、ハイフンがあっても反映）div[class*="m"]{color:red;}"name"が入っていれば一致（スペースがあっても反映、ハイフンがあると反映されない）div[class~="name"]{color:red;}属性の場合は、❶や❷-1で行っています。
❷-(3)完全一致（要素）
div[class]{color:red;}div[class="name"]{color:red;}（スペース、ハイフンがあると反映されない）<divclass="name"></div>に反映されます。属性の場合は、❶や❷-1で行っています。
❸両方一致に対して反映or複数の属性にかけたい
.name.gender{color:red;}or.name{color:red;}.gender{color:red;}であれば、<divclass="name gender"></div>に反映されます。.name{color:red;}.gender{color:red;}or.name,gender{color:red;}であれば<divclass="name"></div><divclass="gender"></div>or<divclass="**** name"></div><divclass="**** gender"></div>に反映されます。3.ここから学んだこと
よく".(ドット)"を抜けることがよくありました。
”検証”で反映できていないことを確認し、class名や記述ミスがないかをよく探していました。