訓練日誌-2024/1/30（CSSについて）

目次

1. 擬似要素について
2. 擬似クラスについて
3. 練習問題

擬似要素について

HTMLには書かずにCSSdakeni擬似的に書くのでそう呼ばれている
擬似要素は全てコロンは２つ付ける

ープロパティー
・first-letter
文の一文字目だけ装飾する（色や大きさなど）
入力例）
🔸HTML
<div class=”pelement1″>
<p>サンプル１<br>サンプル２<br>サンプル３</p>
</div>

🔸CSS
.pelement1 p::first-letter {
font-size: 2em;
color: red;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-5-1

---

・first-line
一行目だけ装飾する（色や大きさなど）
入力例）
🔸HTML
<div class=”pelement2″>
<p>サンプル１<br>サンプル２<br>サンプル３</p>

🔸CSS
.pelement2 p::first-line{
font-size: 2em;
color: red;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-5-2

---

擬似クラスについて

擬似クラスは全てコロンを１つ付ける

ープロパティー

• link　　　　　一度もクリックされていないリンク
  入力例）セレクタ:link { プロパティ名: 値; }
• visited　　　一度クリックされたことのあるリンク
  入力例）セレクタ:visited { プロパティ名: 値; }
• hover　　　リンクにカーソルがのった時（スマホの場合はクリックしてサイトに飛ぶまでの間）
  入力例）セレクタ:hover { プロパティ名: 値; }
• active　　　リンクをクリックして離すまでの間（スマホの場合はタップしている間）
  入力例）セレクタ:active { プロパティ名: 値; }

上記の４つは常に一緒に使用する。
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-4-

---

・first-child / last-child
最初or最後の文だけ指定して装飾する
文字が変わっても最初or最後のものが変わる
入力例）
🔸HTML
<div class=”pclass1″>
<div>子１</div>
<div>子２</div>
<div>子３</div>

🔸CSS
.pclass1 div:first-child {
color: red;
}
.pclass1 div:last-child{
color: blue;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-4-%EF%BC%95

---

・nth-child
n番目の子要素にスタイルを指定します。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。
（整数）：n 番目の子要素が対象になります。
odd（奇数）：奇数番目の子要素が対象になります。
even（偶数）：偶数番目の子要素が対象になります。
（数式）：子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。
入力例）
🔸HTML
<div class=”pclass2″>
<div>子１</div>
<div>子２</div>
<div>子３</div>
</div>

🔸CSS
.pclass2 div:nth-child(2){
color: red;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-4-6

---

・nth-of-type
n 番目の子要素にスタイルを指定します。
nth-child 擬似クラスとの違いは、nth-child 擬似クラスは、n 番目の子要素が対象になりますが、
nth-of-type 擬似クラスは同一のセレクタを持つ n 番目の子要素が対象になります。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。
（整数）：n 番目の子要素が対象になります。
odd（奇数）：奇数番目の子要素が対象になります。
even（偶数）：偶数番目の子要素が対象になります。
（数式）：子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。
入力例）
🔸HTML
<div class=”pclass4″>
<p>子１</p>
<p>子１</p>
<div>子３</div>
<div>子４</div>
</div>

🔸CSS
.pclass4 div:nth-of type(3){
color: red;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-4-7

---

・not
その要素以外をどうするか指定できる
入力例）
一番下の文字以外アンダーバーを入れる
🔸HTML
<div class=”pclass5″>
<div>子１</div>
<div>子２</div>
<div>子３</div>
</div>

🔸CSS
.pclass5{
width: 200px;
}
pclass5: not(:last-child){
border-bottom: 1px #333 solid;
}
詳細：https://html-css.hamaya2020.com/lesson-6.html#L6-4-8

練習問題