セレクタの種類
セレクタ
この場所に対して何かしてねという部分
.wrapなど
全称セレクタ
*{
}
アスタリスクを使う
HTML上に存在するすべての要素に対して何かを指定する
あまり実務で使うことはないらしい
全部の余白を全部いったん0にして
そのあと自分で好みで余白を設定したいみたいなときに使う
ただし読み込みの時にちょっと時間がかかるようになったりする
要素セレクタ
タグ名{
}
h2{
}など
classセレクタ
.クラス名{
}
この特定のdivとpの色を赤く、のように、
要素の違いを超えて一括指定したいときなどに用いる
HTMLでclass属性をつけた要素に対して効く
idセレクタ
#id名{
}
ハッシュid名で記述する
HTMLでid属性をつけた要素に対し
スタイルを適用するときに使う
属性セレクタ：
_blankをもってるものにかけよう等
例：
<img src="a.png" alt="猫の写真">
imgタグに対してかけるとき→
img{
}
alt属性が「猫の写真」になってるものにかける→
img[alt='猫の写真']
疑似要素
セレクタ::疑似要素{
}
セレクタコロンコロン疑似要素とつづる
コロンは１つでも構わないが2つ書くのが(他と区別するため)慣習になっている
div::after{
}
divという要素の一番最後に
疑似的にafterという要素を作ってくださいねという意味？
>要素名:after
スタイルを適用するのは対象要素の直後（要素の直後に内容を挿入する時に使う）
blockquote:after {content:"』";}
疑似クラス
セレクタ：疑似クラス{
}
a:hover{
}
疑似的にそこにクラスを付与する
aタグに対してカーソルを重ねたとき色を変える等
子孫セレクタ
セレクタ セレクタ{
}
セレクタ（半角スペース）セレクタと綴る
body main h2{
}とか
.wrap p{
}とか
よく使うセレクタ
body h2{}と綴ると、body内にあるh2にすべてかかる
間にdivが挟まっていようと適用される(body div h2{}にもかかる)
つまり子にも孫にもかかる
↑
↓
子セレクタ
子供になるセレクタだけにかかる
ul>li{
}
この場合孫にはかからない
ul>li>a{
}と綴ることもできる
複数セレクタ
セレクタ,セレクタ{
}
セレクタ、カンマ、セレクタと綴る
2つ以上のセレクタを指定することもできる
header,main,footer{
width:80%;
}
headerとmainとfooterの横幅を80％にまとめてする。便利
隣接セレクタ
セレクタ＋セレクタ{
}
セレクタ、プラス記号、セレクタと綴る
同じ親を持つ要素（兄弟）に対して使うときのセレクタ
p+div{
}と綴ると、pと隣接している兄弟のdivだけにかかる↓
<div>
<p></p>
<div></div>//この部分だけにかかる
</div>
外側のdivにはかからない
cssは上から実行され、下に書いたものが優先される
h1{
color:#f00;
background-color:#0f0;
}
h1{
color:#00f;
}
こう記述したらh1の文字色は青
