🌝

学習記録5_CSSセレクタ

2023/05/30に公開

CSS

初心者

idea

ひとこと

めっちゃ時間置いてしまったが再開、忘れかけてたけど自分の言葉でメモしておいてだいぶ助かった。。まあ覚える必要ないこと多いが、理解してない感じのまま進む方が気持ち悪いのでこのような学習記録は続けていこうと思う

教材

学習範囲

CSSの、今度はスタイルをあてる対象を選ぶ方法 (CSSセレクタについて) を学ぶ

超重要
- 要素型セレクター
- クラスセレクター
- IDセレクター
- 子孫セレクター
- CSSの詳細度
重要
- 隣接セレクター
- 直下セレクター
- 属性セレクター
- 擬似クラス
- 擬似要素

ノート📓

ユニバーサルセレクター
要素型セレクター（超重要）
セレクターリスト
IDセレクター（超重要）
クラスセレクター（超重要）
CSSセレクター演習
子孫セレクター（超重要）
隣接セレクター
直下セレクター
属性セレクター
擬似クラス
コーディング演習
疑似要素
ある要素に対して複数のスタイルが競合した場合はどうなる?CSSの詳細度（超重要）
インラインスタイルと!important
継承

1. ユニバーサルセレクター

すべての要素を対象にする
アスタリスク*で指定

2. 要素型セレクター（超重要）

ある要素すべてを選択する

3. セレクターリスト

カンマ区切りで選択する

4. IDセレクター（超重要）

HTMLのID要素ごとに選択する, IDはページごとに一意
色に悩んだら
https://coolors.co/palettes/trending

5. クラスセレクター（超重要）

IDと異なりいくつも付与してOK
すきな箇所に共通するスタイルをあてる

6. CSSセレクター演習

7. 子孫セレクター（超重要）

配下にある要素をすべて適用
スペース区切りなのが大事
一番右にある要素のみ選択する

コーディング練習

8. 隣接セレクター

隣り合わせの要素を選ぶ
- 直下とか、ネストされてたりしないことに注意
例えばこの画像だと「h1直後のp要素」

9. 直下セレクター

直下にある要素だけを選ぶ
- 子孫セレクターはすべての子孫が対象だが、直下セレクターでは親子のみ。孫には適用されない

10. 属性セレクター

HTMLタグの"属性"に基づいて選ぶ
よく見るのはinput要素。テキスト、ラジオボタン、パスワードなどのtype属性で指定する

input[type="password"] {
	color: greenyellow;
		 }

属性であれば何でもいけるので、例えばclass属性でもいける

section[class="post"] {
	background-color: purple;
		 }

11. 擬似クラス

ひとつ上までとはちょっと違う。"セレクターに付与する"もの
セレクターで選択した要素に対して、さらに具体的な状況・状態（ホバーしたときに下線を消す等）を指定する

:hover

カーソルをあてたとき
例えば以下のを訳すと「buttonをhover(要素の上にカーソルを当てる)したときに背景色をred,文字色をwhiteにする」

button:hover {
	background-color: red;
	color: white;
}

:active

クリックしたとき
例えば以下のを訳すと「post配下にあるbuttonをクリックした時に背景色をaquaにする」

.post button:active {
	background-color: aqua;
}

:checked

チェックボックスにチェックされたとき
例えば以下のを訳すと「ラジオボタンにチェックが入った時にbox-shadowを3pxでオレンジの線にする」

input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

:nth-of-type()

何番目の、で選べる
- 1st, 2nd てきな意味でnth
例えば「.post:nth-of-type(3)」なら、兄弟で並ぶpost要素の3番目になる
- 自分たち3兄弟をmy-family-kidsとして、「.my-family-kids:nth-of-type(2)」は2番めの私を指すみたいな・・
やってみたところnの範囲は0以上みたい
− 例えば以下のを訳すと「偶数段落のpostの背景色を #c9d5c5 にする」

.post:nth-of-type(2n) {
    background-color:  #c9d5c5;
}

placeholder-shown

プレイスホルダー（文字入力するところ）が表示されているときに特殊なフォントと境界線を適用する

12. コーディング演習

課題文
チェック模様の演習問題
このindex.htmlには25個の<div>要素が書かれています。また、それぞれにはsquareクラスが割り振られています。ここで、偶数番目のdivには黒色（black）の背景色を定義し、奇数番目のdivには赤色（red）の背景色が定義されるようにapp.cssを完成させてください。index.htmlとNO_TOUCHING.cssは編集しないでください！

13. 疑似要素

疑似クラスの仲間で、"セレクターに付与する"もの
セレクターで選択した要素に対して、疑似要素では「具体的な状態」を指定したが、疑似要素ではたとえば"最初の文字"や"最初の行"など「特定の場所」を指定する
擬似クラスと異なり、コロンを2つ使う

::first-letter

要素の最初の文字にスタイルをあてることができる
最初の文字のすぐ前後にある記号 (punctuation) も範囲に含まれる

::first-line

要素の1行目にスタイルをあてることができる

::selection

要素中ハイライト（選択）した箇所にスタイルをあてることができる

14. ある要素に対して複数のスタイルが競合した場合はどうなる?CSSの詳細度（超重要）

カスケード
- 前と後では、後の記述のほうが優先される
- 「まえ」より「あと」がつよい
- これはCSSファイルの読み込みにおいても同様で、HTMLファイルの8行目にlink relでstyle.cssをリンクしてて、続く9行目に例えばmore_styles.cssをリンクしていたら後者のほうが後に読み込まれる→CSSファイル間で競合が生じても後者のファイルが優先される
詳細度
どういった意味か
- 競合が生じているときの話
- ある要素に、同じプロパティが、違う値で定義されている状況を「競合している」と言う
- 競合している場合、より"詳細度"が高い方が優先される。ブラウザが（計算して）判断する
どうやって詳細度は計算されるのか
- 覚える必要ない
- が、感覚的につかめる。下の図の左右比較だと、右の方がより詳細に指定している感じがするよね
- 加えて、IDとクラスと要素では、IDs > classes > elements の強弱関係
- 勝敗は、ロジックにより3桁の数字を算出することで決まる
  - 百の位: IDセレクター(IDs)
  - 十の位: クラス(Classes)、属性(attributes)、擬似クラスセレクター(pseudo-classes)
  - 一の位: 要素型(Elements)、疑似要素セレクター(pseudo-elements)
- ただし単純な数字の比較ではなく、百の位で比較→決まらなければ十の位で比較→決まらなければ一の位で比較、になる点に注意
  - 例えば「0,1,0」(カンマで位を区切っている)と「0,0,15」は前者のほうが強い
- 画像ではselectionとp、それぞれ要素型なので「2」
- 画像では.activeがクラス、navとaが要素型なので「12」
- 計算ツール: https://specificity.keegan.st/

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

※あくまで競合が発生している場合のみの話！

15. インラインスタイルと!important

詳細度の話に戻るが、実はIDセレクターが最強というわけではない
両者とも非推奨ではあるが、インラインスタイルと!importantがある
- インラインスタイルはHTMLファイル内に直接styleを記述する方法
- !importantは詳細度に関係なく優先できる方法（しかし以下の記述の通りできるだけ無くすべき方法　）

button {
    background-color: magenta !important;
}

anti pattern...

16. 継承

スタイルが子要素へ自動的に引き継がれる概念
自分から見て一番近い親のスタイルを継承する
- 例えば、以下の記述における<p>目線では<body>よりも<selection>のほうが近いので後者のスタイルを引き継ぐ。<body>はgrand parents、<selection>はparentsって感じだね

<body>
    <h1>The Header</h1>
    <section>
        <h2>The Subheader</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, quisquam quas placeat quam suscipit dicta inventore odio vero quasi perferendis.</p> 
    </section>
</body>

inheritを記述することで明示的に継承することもできる

button, input {
    color: inherit;
}

継承されないCSSプロパティもある
- たとえば<border>はされない

14.以降、詳しくはこちらのページにも

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

ひとこと

教材

学習範囲

ノート📓

1. ユニバーサルセレクター

2. 要素型セレクター（超重要）

3. セレクターリスト

4. IDセレクター（超重要）

5. クラスセレクター（超重要）

6. CSSセレクター演習

7. 子孫セレクター（超重要）

8. 隣接セレクター

9. 直下セレクター

10. 属性セレクター

11. 擬似クラス

:hover

:active

:checked

:nth-of-type()

placeholder-shown

12. コーディング演習

13. 疑似要素

::first-letter

::first-line

::selection

14. ある要素に対して複数のスタイルが競合した場合はどうなる?CSSの詳細度（超重要）

15. インラインスタイルと!important

16. 継承

Discussion