ーーーーーセレクタの種類(4種類)ーーーーー
1.タイプセレクタ(h2,main,divとか)、ユニバーサル(*)
html要素を直接指定するもの
2.id,class
#idはそのhtmlで一つだけ指定できる。
.classは、複数に指定できる。
html
class=title
css
.title
基本的にclassでオッケー
3.疑似クラス(:)、疑似要素(::)
.title:hover{}
hoverした時にのみ適用される
一つの要素として出てくる。
h2::after{
content:"🎅";
}
h2の最後に🎅
4.結合子
子結合子
main > h2
直下のh2に適用してね
子孫結合子
main h2
これは、メインのh2全てに適用してねということ
子だけじゃなく孫の下までしてね
隣接兄弟結合子
article + article {}
articleの隣り合ったarticleからしてね
二つ目のアーティクルから適用される
ブログとかで、記事一覧で間を開けたい時
二個目以降のマージントップを空ける。
ーーーーーブロック要素、インライン要素ーーーーー
インライン要素は、
width,heigthが効かない。
改行されない。
padding,margin,borderは、効くが他の要素にまたがるのであまり使われない
ブロック要素は、
改行される。
display: block;
display: inline;
で変更できる。