はじめに
HITOTSU株式会社の河村康治です。
今回はCSSの擬似クラスに関して学んでいこうと思います！
擬似クラスとは
擬似クラスは、要素の特定の状態に応じてスタイルを適用するものです。例えば、ユーザーがリンクをホバーしたときや、フォームの入力がフォーカスされているときなどの状況に合わせてスタイルを変更できます。
1. hover
これは有名ですね！ホバー時にのみ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>Hover Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="hover-button">Hover me!</button>
</body>
</html>
styles.css
.hover-button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.hover-button:hover {
background-color: red; /* マウスオーバー時に背景色を変更 */
}
2. focus
コンポーネントをフォーカスした時に適用される。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" class="focus-input" placeholder="フォーカスしてみてください">
</body>
</html>
styles.css
.focus-input {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s;
}
.focus-input:focus {
border-color: #3498db; /* フォーカス時にボーダーの色を変更 */
outline: none; /* デフォルトのアウトラインを削除 */
}
3. active
要素がクリックされている間に適用される
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="active-button">Click me!</button>
</body>
</html>
styles.css
.active-button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.active-button:active {
background-color: #2980b9; /* クリック時に背景色を変更 */
}
4.nth-child
リストの偶数・奇数の行をスタイリングしたり、特定の位置の要素にスタイルを付けたりするのに便利です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nth-child Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="nth-child-example">
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
<li>アイテム 5</li>
<li>アイテム 6</li>
</ul>
</body>
</html>
styles.css
.nth-child-example li {
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
}
.nth-child-example li:nth-child(odd) {
background-color: #f4f4f9; /* 奇数番目のアイテムに背景色を適用 */
}
.nth-child-example li:nth-child(even) {
background-color: #e0e0e0; /* 偶数番目のアイテムに背景色を適用 */
}
→li:nth-child(odd)が奇数番目、li:nth-child(even)が偶数番目を設定しています
5. first-child / last-child
要素の最初または最後の子要素にスタイルを適用します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First and Last Child Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="child-example">
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
<li>アイテム 5</li>
</ul>
</body>
</html>
styles.css
.child-example li {
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
}
.child-example li:first-child {
background-color: #3498db; /* 最初のアイテムに背景色を適用 */
color: #fff; /* テキストの色を白に設定 */
}
.child-example li:last-child {
background-color: #e74c3c; /* 最後のアイテムに背景色を適用 */
color: #fff; /* テキストの色を白に設定 */
}
6.not
特定の条件に合致しない要素にスタイルを適用する擬似クラスです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="not-example">
<li>アイテム 1</li>
<li class="exclude">アイテム 2</li>
<li>アイテム 3</li>
<li class="exclude">アイテム 4</li>
<li>アイテム 5</li>
</ul>
</body>
</html>
styles.css
.not-example li {
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
}
.not-example li:not(.exclude) {
background-color: #3498db; /* クラス "exclude" を持たないアイテムに背景色を適用 */
color: #fff; /* テキストの色を白に設定 */
}
7.checked
チェックボックスやラジオボタンが選択されているときに適用されます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checked Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="checkbox-example">
<input type="checkbox" id="checkbox1" class="checkbox">
<label for="checkbox1">チェックボックス 1</label>
<br>
<input type="checkbox" id="checkbox2" class="checkbox">
<label for="checkbox2">チェックボックス 2</label>
</div>
</body>
</html>
styles.css
.checkbox-example {
display: flex;
flex-direction: column;
gap: 10px;
}
.checkbox {
display: none; /* チェックボックス自体を非表示にする */
}
.checkbox + label {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.checkbox:checked + label {
background-color: #3498db; /* チェックされているときの背景色 */
color: #fff; /* テキストの色を白に設定 */
}
8.disabled/enabled
フォーム要素が無効（disabled）または有効（enabled）な状態のときに適用されます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled and Enabled Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn" disabled>無効化されたボタン</button>
<button class="btn">有効化されたボタン</button>
</body>
</html>
styles.css
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:enabled {
background-color: #3498db; /* 有効化されたボタンの背景色 */
color: #fff; /* テキストの色を白に設定 */
}
.btn:disabled {
background-color: #ccc; /* 無効化されたボタンの背景色 */
color: #666; /* テキストの色をグレーに設定 */
cursor: not-allowed; /* カーソルを「禁止」アイコンに変更 */
}
終わりに
便利なCSSは積極的に使っていきましょう！
Discussion