しまぶーのIT大学はわかりやすいです。
ただ、完全な初心者向けとは言いづらいのかな？
自分としては、完全初心者向けの参考書で勉強してから見たら、「あぁ、なるほど」となります。
今回は、改めて理解したことを記事にします。
✅属性によるセレクターについて
HTML
<li><a href =…></a></li>
CSS
a[href=”urlなど”] {color:red}
href属性と持っているa要素にcolor redのスタイルを適応する。
a[href^ =”https://www.”]{color:red}
href属性を持っているhttps://www.から始まるもので一致するものにスタイル適応する。(前方一致)
a[href* =”yahoo”]{color:red}
href属性を持っているyahooを持つもののみ一致するものにスタイル適応する。(部分一致)
a[href$ =”.co.jp”]{color:red}
href属性を持っている最後が.co.jpのもののみスタイルを適応する。(後方一致)
✅疑似クラスおよび疑似要素によるセレクター
article p : first-of-type
pタグの最初の部分にスタイルを適応する。
ここで、first-of-typeとfirst-childの違い。
first-of-typeは、決めた要素のみの最初にする。
first-childは、最初の要素にするか
例HTML
<article>
<h1>テキストです。</h1>
<p> テキストテキストテキストテキストテキストテキスト </p>
<p> テキストテキストテキストテキストテキストテキスト </p>
<p> テキストテキストテキストテキストテキストテキスト </p>
<p> テキストテキストテキストテキストテキストテキスト </p>
</article>
CSS
article p : first-of-type {
font-weight:bold
}
結果
テキストです。
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
ちなみに、last-of-typeとlast-childも同じです。
次は、nth-of-type()
()番目の要素にスタイルを適応する。
notを使えば、
例: article p:not(: nth-of-type;)
意味:first-of-type以外の(最初のp要素以外の)スタイルを適応する。
さらにさらに…
p:not(:hover) {
back-ground-color:pink
}
とすると、p要素には、あらかじめ背景がピンクになり、カーソルをp要素に持っていくと背景のピンクが消えて、白の背景(デフォルトの色)になります。
::before
::after
p::first-line {
color:red
}
とすると、p要素の最初の行にスタイリングをします。
p::first-letter {
font-size:80px
}
とすると、最初の文字のみ文字の大きさを80pxにします。
✅あともう少し、結合子については
・子孫結合子
article p{}
・子結合
main > h1
意味:main直下のh1に適応
・隣接兄妹結合
article p:not(:first-of-type){…}
≒
article p + p {…}
意味:p要素の次のp要素に適応
よく使う使い方は、margin-top:40pxなど2番目の要素からmarginを空けたいときに使う。
・一般兄弟結合
article h1 ~ p{…}
h1より下のp要素に適応。
カスケードについて
カスケード:同じ宣言をしても後の宣言が優先的に適応される(あと勝ち)
！importantはあまり推奨されていない。
最後にinherit, initial, unsetについて
inheritは親要素から値を引き継ぐ
initialはブラウザが扱っている適応地を引き継ぐ
unset 親要素があればinheritを適応
initialがあればinitial
all: unset すべてのプロパティを初期値へ
今日は以上です。
コメント