【概要】
1.属性・セレクタとは何か
2.CSSの属性セレクタの書き方
3.ここから学んだこと
1.属性・セレクタとは何か
属性：
タグの中の要素と一緒に含まれており、要素に情報を付け加える役割をもちます。属性に名前がついているものが”属性値”と言われます。
セレクタ：
CSSで使う言葉で、どのHTMLの属性に適用するかを示す役割です。
なのでclass属性とclassセレクタの違いは、
class属性は”HTML”、classセレクタは”CSS"を示しています。
例
<link rel="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;
}
<div class="name"></div>
<div class="gender"></div>
に反映します。
❷-(1)一部分の名前に反映
.name{
color: red;
}
"name"がついている属性は全て反映されます。
<div class="A name"></div>
<div class="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;}（スペース、ハイフンがあると反映されない）
<div class="name"></div>
に反映されます。
属性の場合は、❶や❷-1で行っています。
❸両方一致に対して反映or複数の属性にかけたい
.name.gender{
color: red;
}
or
.name{
color: red;
}
.gender{
color: red;
}
であれば、
<div class="name gender"></div>
に反映されます。
.name{
color: red;
}
.gender{
color: red;
}
or
.name,gender{
color: red;
}
であれば
<div class="name"></div>
<div class="gender"></div>
or
<div class="**** name"></div>
<div class="**** gender"></div>
に反映されます。
3.ここから学んだこと
よく".(ドット)"を抜けることがよくありました。
”検証”で反映できていないことを確認し、class名や記述ミスがないかをよく探していました。