こんにちは。
本日は前回の『擬似要素』に引き続き、webサイトにデザインを施すCSSの設計の際に知っていると便利な『擬似クラス』についてご説明します。
～ 擬似クラスとは ～
擬似クラスとは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
1. A:hover（要素にマウスがホバーした際の指定）
要素に対してマウスがホバーした状態を指定してスタイルを適用させます。
ここでは、リンクにマウスカーソルをあてるとリンクの色を変化させます。
HTML
<a href=”#”>リンクテキスト</a>
CSS
a:hover {
color: #0090ff;
}
2. A:not(B)（B以外の要素の指定）
親要素内の指定の要素を除外してスタイルを適用させます。
ここではマウスカーソルをあてた画像以外の画像にhoverを指定します。
HTML
<ul>
<li><a href=”#”><img src=”./flower1.webp”></a></li>
<li><a href=”#”><img src=”./flower3.webp”></a></li>
<li><a href=”#”><img src=”./flower2.webp”></a></li>
</ul>
CSS
ul {
visibility: hidden;
display: table;
margin: 0;
padding: 0;
}
li{
display: table-cell;
}
li a{
visibility: visible;
}
ul:hover a:not(:hover){
filter: grayscale(1);
}
img {
width: 250px;
height: 250px;
object-fit: cover; //縦横比を保ち、はみ出る部分はトリミングします
}
3. A:nth-child(n)（親要素内のn番目の要素の指定）
親要素内のn番目の要素を指定してスタイルを適用させます。
nにはodd(奇数)、even(偶数)の指定もできます。また、n番目から後すべてに適用する場合は、n+適用を開始したい項目の数値を入力します。
4. A:empty（子を持たない要素の指定）
要素内容が空となるA要素にスタイルを適用する際に使用します。
ここでは、3と4を利用して表を作成します。
HTML
<ul>
<li>名前</li>
<li>田中 太郎</li>
</ul>
<ul>
<li>性別</li>
<li>男</li>
</ul>
<ul>
<li>好きな食べ物</li>
<li></li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul li:nth-child(odd){
background-color: #ccc;
color: #fff;
}
li:empty::before {
content:””;
display:block;
width: 10px;
height: 1px;
background-color: #111;
margin-top: 10px;
}
擬似要素、疑似クラスともに使いこなせると様々な表現が可能になり、とても便利です！
今回ご紹介したものは一部で、上記以外にもたくさんの種類があります。ぜひ調べて活用してみてください。
入会申込
ログイン
