CSS ~しまぶーのIT大学~で改めて勉強できたこと

しまぶーの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 すべてのプロパティを初期値へ

今日は以上です。

もりけん塾
もりけん先生ブログ

コメント