今回は、【CSS】初心者向け擬似クラスにつてい解説していきます。
よく現場で使用している擬似クラスについて紹介するね!
擬似クラスについて
そうなんだよね。
今回は現場でよく使用されている擬似クラスについて紹介していくよ!
簡単なサンプルのご用意
シンプルなリストを作成しましょう。
今回はリストタグを使い、項目を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;
}
上からn番目の要素にスタイルを適用する方法
: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;
}
下からn番目の要素にスタイルを適用する方法
: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;
}
3の倍数の要素にスタイルを適用する方法
: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を適用する方法
::before
を使用すると
要素の直前に要素が挿入されます。
ul li::before{
content: '●';
color:#b3d3ae;
}
afterを適用する方法
::after
を使用すると
要素の直後に要素が挿入されます。
ul li::after{
content: '▲';
color:#b3d3ae;
}
まとめ
今回はこれで以上です。
私がよく現場で使用する擬似要素、擬似クラスをまとめてみました。
擬似要素、擬似クラスは作業では確実に使用するので必ず覚えておきましょう!
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事