- HOME
- > BLOG CATEGORY
- 【CSS】初心者向け擬似要素、擬似クラスについて理解しましょう!

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
[記事の内容]
擬似クラスって調べてみると結構あるのよね
そうなんだよね。
今回は現場でよく使用されている擬似クラスについて紹介していくよ!
シンプルなリストを作成しましょう。
今回はリストタグを使い、項目を6つ用意しそれに対して擬似クラスを使用します。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
</ul>
:first-child
擬似クラスは、
最初の子要素にスタイルが適用されます。
ul li:first-child{
background-color: #e2d0b6;
}
:last-child
擬似クラスは、
最後の子要素にスタイルが適用されます。
ul li:last-child{
background-color: #e2d0b6;
}
:nth-child(even)
擬似クラスは、
偶数の子要素にスタイルが適用されます。
ul li:nth-child(even){
background-color: #e2d0b6;
}
:nth-child(odd)
擬似クラスは、
奇数の子要素にスタイルが適用されます。
ul li:nth-child(odd){
background-color: #e2d0b6;
}
:nth-child(3)
擬似クラスは、
上から3番目の子要素にスタイルが適用されます。
:nth-child(5)
擬似クラスは、
上から5番目の子要素にスタイルが適用されます。
/*上から3番目の子要素を茶色*/
ul li:nth-child(3){
background-color: #e2d0b6;
}
/*上から5番目の子要素を緑色*/
ul li:nth-child(5){
background-color: #b3d3ae;
}
:nth-last-child(2)
擬似クラスは、
下から2番目の子要素にスタイルが適用されます。
:nth-last-child(4)
擬似クラスは、
下から4番目の子要素にスタイルが適用されます。
/*下から2番目の子要素を茶色*/
ul li:nth-last-child(2){
background-color: #e2d0b6;
}
/*下から4番目の子要素を緑色*/
ul li:nth-last-child(4){
background-color: #b3d3ae;
}
:nth-child(3n)
擬似クラスは、
3の倍数の子要素にスタイルが適用されます。
ul li:nth-child(3n){
background-color: #e2d0b6;
}
::first-letter
擬似クラスは、
最初の文字にスタイルが適用されます。
p::first-letter {
color: #b3d3ae;
font-size: 30px;
}
::first-line
擬似クラスは、
最初の行にスタイルが適用されます。
p::first-line {
color: #b3d3ae;
}
::before
を使用すると
要素の直前に要素が挿入されます。
ul li::before{
content: '●';
color:#b3d3ae;
}
::after
を使用すると
要素の直後に要素が挿入されます。
ul li::after{
content: '▲';
color:#b3d3ae;
}
今回はこれで以上です。
私がよく現場で使用する擬似要素、擬似クラスをまとめてみました。
擬似要素、擬似クラスは作業では確実に使用するので必ず覚えておきましょう!
2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog