今回は疑似クラスについて解説いたします。
疑似クラスと似ているもので、疑似要素というものがありますが、別物になります。
疑似要素については過去の記事で解説しておりますので、疑似要素がわからないといった方はこちらの記事もご参考いただけますと幸いです。
疑似クラスについて
疑似クラスとは
セレクタが特定の条件のときにCSSスタイルを適用するといったものとなります。
例えばliタグが並んでいて、最初や最後のタグだけ色を変えたり、あるいは偶数番目のタグのみCSSスタイルを適用したりといったことも可能です。
マウスカーソルを重ねた際に色を変えたりするのも疑似クラスによって指定されております。
疑似クラスの指定方法について
セレクタの後ろに「:」をつけて記載します。
疑似要素は「::」コロンが２つとなっておりましたが、疑似クラスでは１つとなります。
以下が記載例となります。
<ul class="list">
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
</ul>
<style>
/* セレクタの後ろに:first-child */
.list li:first-child {
color: blue;
font-weight: bold;
}
</style>
セレクタの後ろの「:first-child」が疑似クラスにあたります。
よく使用する疑似クラスについて
:first-child （最初の子要素）
同一階層の要素の一番始めの要素に対してCSSスタイルを適用します。
<ul class="list">
<li>1番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
</ul>
<style>
/* セレクタの後ろに:first-child */
.list li:first-child {
color: blue;
font-weight: bold;
}
</style>
liタグに対して:first-childを指定しているため、先頭のliタグにのみCSSスタイルが適用されています。
:last-child （最後の子要素）
同一階層の要素の一番最後の子要素に対してCSSスタイルを適用します。
<ul class="list">
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
</ul>
<style>
/* セレクタの後ろに:last-child */
.list li:last-child {
color: blue;
font-weight: bold;
}
</style>
liタグに対して:last-childを指定しているため、最後のliタグにのみCSSスタイルが適用されています。
:nth-child(x) x番目の子要素にCSSスタイルを適用する
同一階層の要素で指定された子要素（x）に対してCSSスタイルを適用します。
番号を指定する場合の記載方法 （番号）
<ul class="list">
<li>1番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>2番目のリスト</li>
<li>3番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>4番目のリスト</li>
<li>5番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
</ul>
<style>
/* セレクタの後ろに:nth-child(x) */
.list li:nth-child(1) {
color: blue;
font-weight: bold;
}
.list li:nth-child(3) {
color: blue;
font-weight: bold;
}
.list li:nth-child(5) {
color: blue;
font-weight: bold;
}
</style>指定している番号（x番目）の子要素に対してCSSスタイルが適用されています。
奇数番目の子要素に対しての記載方法 （odd）
<ul class="list">
<li>1番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>2番目のリスト</li>
<li>3番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>4番目のリスト</li>
<li>5番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
</ul>
<style>
/* セレクタの後ろに:nth-child(odd) */
.list li:nth-child(odd) {
color: blue;
font-weight: bold;
}
</style>
:nth-child(odd)を指定することにより、奇数番目の子要素に対してCSSスタイルが適用されております。
偶数番目の子要素に対しての記載方法 （even）
<ul class="list">
<li>1番目のリスト</li>
<li>2番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>3番目のリスト</li>
<li>4番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>5番目のリスト</li>
</ul>
<style>
/* セレクタの後ろに:nth-child(even) */
.list li:nth-child(even) {
color: blue;
font-weight: bold;
}
</style>
:nth-child(even)を指定することにより、偶数番目の子要素に対してCSSスタイルが適用されております。
xの倍数の子要素に対しての記載方法 （xn）
<ul class="list">
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li> <!-- ここのタグにCSSスタイルが適用される -->
</ul>
<style>
/* セレクタの後ろに:nth-child(xn) */
.list li:nth-child(3n) {
color: blue;
font-weight: bold;
}
</style>
:nth-child(3n)を指定することにより、3の倍数の子要素に対してCSSスタイルが適用されております。
:nth-of-type(x) x番目のタグにCSSスタイルを適用する
:nth-childに似ているため、混同してしまう方もいらっしゃるかと思いますが、:nth-of-typeは子要素ではなく、指定するタグに対して適用します。
番号を指定する場合の記載方法 （番号）
<div class="box">
<h2>見出しタグ</h2>
<p>1番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>
<style>
/* セレクタの後ろに:nth-of-type(x) */
.box p:nth-of-type(1) {
color: blue;
font-weight: bold;
}
</style>
p:nth-of-type(1)を指定しているため、1番目のpタグに対して、CSSスタイルが適用されています。
:nth-childとの違い
:nth-childと似ておりますが、違いを把握するために、:nth-of-typeではなく:nth-childで指定してみます。
<div class="box">
<h2>見出しタグ</h2>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>
<style>
.box p:nth-child(1) {
color: blue;
font-weight: bold;
}
</style>
CSSスタイルが適用されていません。
これはnth-child(x)がx番目の子要素に対する指定であるため、1番目がh2タグになっております。
CSSの指定が.box p:nth-child(1)となっており、1番目はpタグではなく、h2タグとなっています。
1番目がpタグではないということで、指定が空振りしております。
奇数番目の要素に対しての記載方法 （odd）
<div class="box">
<h2>見出しタグ</h2>
<p>1番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>2番目のpタグ</p>
<p>3番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>4番目のpタグ</p>
<p>5番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>6番目のpタグ</p>
</div>
<style>
/* セレクタの後ろに:nth-of-type(odd) */
.box p:nth-of-type(odd) {
color: blue;
font-weight: bold;
}
</style>
p:nth-of-type(odd)を指定することにより、奇数番目のpタグに対してCSSスタイルが適用されております。
偶数番目の要素に対しての記載方法 （even）
<div class="box">
<h2>見出しタグ</h2>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>3番目のpタグ</p>
<p>4番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
<p>5番目のpタグ</p>
<p>6番目のpタグ</p> <!-- ここのタグにCSSスタイルが適用される -->
</div>
<style>
/* セレクタの後ろに:nth-of-type(even) */
.box p:nth-of-type(even) {
color: blue;
font-weight: bold;
}
</style>
p:nth-of-type(even)を指定することにより、偶数番目のpタグに対してCSSスタイルが適用されております。
xの倍数のタグに対しての記載方法 （xn）
<div class="box">
<h2>見出しタグ</h2>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
<p>4番目のpタグ</p>
<p>5番目のpタグ</p>
<p>6番目のpタグ</p>
</div>
<style>
/* セレクタの後ろに:nth-of-type(xn) */
.box p:nth-of-type(3n) {
color: blue;
font-weight: bold;
}
</style>
:nth-of-type(3n)を指定することにより、3の倍数のpタグに対してCSSスタイルが適用されております。
:not（） 否定疑似クラス
指定したクラスや疑似クラスを除く要素に対してスタイルを適用することが可能です。
例えば、この要素にはCSSスタイルを適用したくない・・・、リストの最後の要素だけ下線を引きたくない・・・など:notを使用することによって実現することができます。
リストの最後だけ下線を引きたくない場合
<ul class="list">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>
<style>
ul {
padding: 16px;
border: 1px solid #555;
width: 150px;
text-align: center;
}
.list li {
padding: .5em;
border-bottom: 1px solid #555;
}
</style>
このようなレイアウトがあった場合、4番目のliタグの下線だけ引きたくないといった場合に:notを使用すると簡単に指定することができます。
<ul class="list">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>
<style>
ul {
padding: 16px;
border: 1px solid #555;
width: 150px;
text-align: center;
}
.list li {
padding: .5em;
}
.list li:not(:last-child) {
border-bottom: 1px solid #555;
}
</style>
:not(:last-child)を指定して、一番最後のliタグ以外にborder-bottomを適用しています。
このように〇〇以外にといった指定が可能です。
:hover マウスカーソルを重ねた場合
Webサイトでマウスカーソルをボタンに合わせた際に、色が変わったり変化が行ったことはありませんか？
:hoverを使用することによって、マウスカーソルが要素の上にあった場合にのみ、CSSスタイルを適用することが可能です。
:hoverについてはかなり頻度が高いため、ぜひ覚えていってください！
:hoverの記載方法
/* 一部抜粋 */
.box a {
text-align: center;
display: block;
padding: 1em 0;
background-color: #802323;
color: #fff;
border-radius: 16px;
}
.box a:hover {
opacity: .5;
}
aタグに対して:hoverを付けております。変化を起こしたいセレクタに対して:hoverを付け、CSSを記載することでスタイルを適用することができます。
さいごに
今回は疑似クラスについて解説させていただきました。
疑似クラスを使用することによって、個別にclassを付与する必要もなくなり、コードもすっきりさせることができます。
コーディングがかなり効率的に行えるようになりますので、活用していきましょう！
