はじめに
CSSを学びたい！Step17です！今回は擬似クラスのis,has,whereに関して学んでいきます！！
1. is
:isはCSSの擬似クラスセレクタで、複数のセレクタをまとめて指定するために使用されます。これにより、コードの冗長性を減らし、スタイルの適用を簡潔にすることができます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
</body>
</html>
styles.css
:is(h1, h2, h3) {
color: blue;
font-family: Arial, sans-serif;
}
2. has
:hasはCSSの擬似クラスセレクタで、特定の子要素を持つ親要素を選択するために使用されます。これにより、特定の条件を満たす要素にスタイルを適用することができます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>この段落はdiv内にあります。</p>
</div>
<div>
このdivには段落がありません。
</div>
</body>
</html>
styles.css
div:has(p) {
border: 2px solid red;
padding: 10px;
}
3. where
:whereはCSSの擬似クラスセレクタで、複数のセレクタをまとめて指定するために使用されます。:isと似ていますが、:whereは特異性(詳細度)がゼロであるため、他のスタイルルールと競合しにくいという特徴があります。
ん？ 特異性？詳細度？って何？？同じに見えるけど、どう違うの？？と思いましたが、一旦置いておきます。次回以降に紹介します！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
</body>
</html>
styles.css
:where(h1, h2, h3) {
color: green;
font-family: Verdana, sans-serif;
}
おわりに
擬似クラスは便利でいいですね！！