CSSの基本セレクターを学んでみよう
まず、
h1{ color:red; }
h1をセレクター、color:red;を宣言と呼ぶ。
idセレクターを使おう
id属性は同じページ内で同じ値を使ってはいけない。
また、id属性はclass属性のように空白を含めてはいけないため、複数の値を指定できない。
属性セレクターを使おう
属性セレクターには[]を使う。
<a href="" target="_blank">twitter</a>
↑この場合、
CSSに
[target]{ font-size:10px; }
と指定
※targetとは別ページに飛ばす際に使うセレクター
<a href="#top">TOP</a>
↑この場合、
[href="#top"]と指定
ー－－urlを指定したいときー－－
完全一致 [href="value"]
前方一致 [href^="https"]
後方一致 [href$="value"]
部分一致 [href＊="value"]
セレクターを組み合わせてみよう
a,b .info,p
カンマ区切りは両方適用される
ab h1.info
くっつけると h1かつ.info という意味
同じ要素にある時に使う
例）<h1 class="info"></h1>
a>b main > h1
mainの直下のh1という意味。※直下でしか適用されない
a b main h1
空白は mainかつh1
mainより下だったらどの階層でもよい
a+b ｐ + p
ｐ直下のｐのみ。
border-topで下線を表す際よく使う。
::before,::after疑似要素を使おう
ー－←これで文字を囲みたいとき
h1::before{ content'-'; } h1::bafter{ content'-'; }
これは正直HTMLに書けば簡単だけど、記号だからHTMLを見やすくするためにCSSに書くとかそういう時にしか使わない。
:hover疑似クラスを使ってみよう
ちなみにボタンは<button>でも<div class="btn">でもよい。
よく使うボタンのスタイリング
button{ cursor:pointer; }
button:hover{ opacity:0.8; }
##:nth-child疑似クラスを使おう
同じ階層に要素がならんでいるときに使う。
mainの直下のpの3番目にスタイルをつけたいとき
main > :nth-child(3)
3の倍数の部分にスタイルをつけたいとき
main > :nth-child(3n)
奇数の部分にスタイルをつけたいとき
main > :nth-child(odd)
偶数の部分にスタイルをつけたいとき
main > :nth-child(even)
最初のみつけたいとき
main > :first-child
最後のみつけたいとき
main > :last-child
nth-of-type疑似クラスを使おう
<h>〇見出し</h〇> <p>こんにちは。</p> <p>こんにちは。</p> <h2〇>見出し</h〇> <p>こんにちは。</p> <p>こんにちは。</p>
このように様々な要素があるときに使う。
例えば3番目のh２にスタイルをつけたかった場合、
main > h2:nth-of-type(3)
nth-childと違い、どの要素（この場合h2）に対する順番か
を指定する必要がある。
odd, even, :first-child, :last-child も使える。
:empty , :not疑似クラスを使おう
例えばli要素で空の部分に背景をつけたいとき、
li:empty{ backgrouund:red; }
と指定できる。
※:emptyは半角や改行は空とみなされない。
コメントは空とみなされる。
:not()は空ではないという意味で指定できる。
li:not(:empty){
backgrouund:red;
}
詳細度を計算してみよう
左から
【id】, 【class,属性、疑似クラス】、【要素、疑似要素】
の順番で左から数字の大きいものが優先される。
そのため、一番下に書いたコードよりも優先度の高いものが先に書かれていたらそちらが優先される。
優先されるスタイルを確認しよう
例えばidを２つ書くことで詳細度のスコアが高くなる。
【詳細度よりも優先されるもの】
・style属性に直接書く。
・さらに！importantのほうが優先度が高い。