セレクタ

#セレクタとは
・何に対して何をどうしたいかを指定してあげるもの
##何に対して（セレクタ）
・body、h1、head...等これら以外も指す
・タイプセレクタ要素名{属性:値;}
・セレクタ{属性（プロパティ）:値;}
##属性（プロパティ）
・セレクタの何を指定したいか
##値
・セレクタの何に指定したものをどうしたいのか？

css

p{color:#ccc;}

上記の意味はｐタグの色を#cccに指定するという意味を持つ

##クラスセレクタ「class」
・1ページに何度も使える
・class名も駄々かぶり大丈夫
・大事なのは名前付け
・誰が見てもわかるような名前をつけること

css

.class{bg:#ccc;}

上記はclassというクラス名を持つものの背景に対して色を#cccにしてくださいという意味

##IDセレクタ「ID」
・1ページに何度も使える
・使えるがid名かぶりはだめ
・動くには動くけども間違いである
・誰が見てもわかるような名前をつけること

css

#id{bg:#ccc;}

上記はidというid名を持つものの背景に対して色を#cccにしてくださいという意味
##全称セレクタ
・*{属性:値;}
・優先度は最も低いので簡単に消せる
・全てに効果を発揮するため発揮してほしくない輩に対してはきちんと指定してあげないといけない

css

*{
padding:0px;
margin:0px;
font-size:18px;
}

上記はページ内全てに対してパディングとマージンを0pxに
文字サイズを18pxに指定するという意味

css

#main * p{
font-size:18px;
}

上記はid「main」の中のpに文字の大きさを18pxに指定するという意味

##グルーピング
・セレクタ,セレクタ{属性（プロパティ）:値;}
・同時に効かせたいコードの時に使うと大変便利なのがこの子
・カンマ「　,　」を忘れないこと

css

h1,h2,h3{
color:#ccc;
}

上記はh1,h2,h3に対して色を#cccに指定するという意味

##子孫セレクタ
・親要素 子要素{属性（プロパティ）:値;}
・こいつを理解してあげるとコードを理解しやすくなる
・何の中の何の中の何に対して何をどうしてあげるか

css

main p span{
color:#ccc;
}

上記はmainの中のｐの中のspanに対して文字色を#cccに変更してあげるという意味