CSSセレクターで実現できる高度な操作とは？ 擬似クラス・擬似要素・属性セレクターなどを徹底解説
擬似クラスセレクター
擬似クラスセレクターは、要素の特殊な状態や動作を表すために使用されます。代表的な例として、以下のようなものがあります。
:odd: 奇数番目の要素:even: 偶数番目の要素:nth-child(n): 親要素のn番目の子要素:last-child: 親要素の最後の子要素:first-child: 親要素の最初の子要素:active: 要素がクリックされている状態:focus: 要素がフォーカスされている状態:hover: マウスカーソルが要素の上をホバしている状態
擬似クラスセレクターは、:hover のようにコロン(:)で始まることが特徴です。擬似クラスセレクターを複数組み合わせることも可能です。
例：
a:hover {
color: red;
}
button:focus {
background-color: blue;
}
この例では、a要素にマウスカーソルがホバしているときは文字色が赤くなり、button要素がフォーカスされているときは背景色が青くなります。
擬似要素セレクター
擬似要素セレクターは、要素の一部または装飾を表すために使用されます。代表的な例として、以下のようなものがあります。
::selection: 選択されたテキスト::first-line: 要素の最初の行::after: 要素の後に挿入されるコンテンツ::before: 要素の前に挿入されるコンテンツ
擬似要素セレクターは、二重コロン(::)で始まることが特徴です。擬似要素セレクターは、コンテンツの装飾やレイアウト調整などに役立ちます。
p::before {
content: "（";
}
p::after {
content: "）";
}
この例では、p要素の前に「（」と、後に「）」という文字が挿入されます。
属性セレクター
属性セレクターは、要素の属性値に基づいて要素を特定するために使用されます。属性セレクターは、属性名と属性値を角括弧[]で囲んで記述します。
img[alt="画像の説明"] {
border: 1px solid black;
}
a[href^="https://"] {
color: blue;
}
この例では、alt 属性の値が「画像の説明」である img 要素にボーダーが設定され、href 属性の値が "https://" で始まる a 要素の文字色が青くなります。
子孫セレクター
子孫セレクターは、ある要素の子孫要素をすべて選択するために使用されます。子孫セレクターは、空白スペースで親要素と子孫要素を区切ります。
ul li {
list-style-type: disc;
}
div p {
margin: 10px;
}
この例では、ul 要素の子孫であるすべての li 要素に箇条書き記号が設定され、div 要素の子孫であるすべての p 要素に余白が設定されます。
隣接兄弟セレクター
隣接兄弟セレクターは、ある要素の直後に続く兄弟要素を特定するために使用されます。隣接兄弟セレクターは、+ 記号を使用して記述します。
h1 + p {
margin-top: 20px;
}
img + span {
font-style: italic;
}
この例では、h1 要素の直後に続く p 要素に上余白が設定され、img 要素の直後に続く span 要素が斜体となります。
兄弟セレクターは、ある要素と同じ親要素を持つすべての兄弟要素を特定するために使用されます。兄弟セレクターは、~ 記号を使用して記述します。
li ~ li {
border-bottom: 1px solid #ccc;
}
a ~ span {
color: gray;
}
擬似クラスセレクター
nav ul li a:hover {
background-color: #ccc;
}
説明
background-color: #ccc;は、背景色をグレーに設定します。:hoverは、マウスカーソルが要素の上をホバしている状態を表します。nav ul liは、ナビゲーションメニューのリストアイテム内のリンクをすべて選択します。
擬似要素セレクター
例：記事の見出しに装飾を追加する
article h2::before {
content: "★";
color: red;
margin-right: 10px;
}
説明
margin-right: 10px;は、右余白を10pxに設定します。color: red;は、文字色を赤に設定します。content: "★";は、コンテンツとして「★」を挿入します。::beforeは、要素の前に挿入されるコンテンツを表します。article h2は、記事の見出し（h2要素）をすべて選択します。
属性セレクター
例：特定のクラスを持つすべての画像にボーダーを設定する
img[class*="photo"] {
border: 1px solid #ccc;
}
説明
border: 1px solid #ccc;は、ボーダーを1pxの太さの点線でグレーに設定します。[class*="photo"]は、class属性の値に "photo" を含む要素を選択します。imgは、すべての画像要素を選択します。
子孫セレクター
例：テーブル内のすべてのセルに余白を設定する
table tr td {
padding: 10px;
}
説明
padding: 10px;は、セル内側の余白を10pxに設定します。tdは、テーブル内のすべてのセルを選択します。trは、テーブル内のすべての行を選択します。tableは、すべてのテーブル要素を選択します。
隣接兄弟セレクター
例：見出しの次の段落にマージンを設定する
h2 + p {
margin-top: 20px;
}
説明
margin-top: 20px;は、上余白を20pxに設定します。pは、段落要素（p要素）を選択します。+は、直後に続く兄弟要素を選択します。h2は、すべての見出し（h2要素）を選択します。
例：すべての画像の次のテキストをグレーにする
img ~ span {
color: gray;
}
color: gray;は、文字色をグレーに設定します。spanは、インライン要素（span要素）を選択します。~は、同じ親要素を持つすべての兄弟要素を選択します。imgは、すべての画像要素を選択します。
JavaScriptを使用する
JavaScriptを使用して、要素を動的に操作し、スタイルを適用することができます。この方法は、セレクターの複雑さを回避したり、ページの読み込み後にスタイルを動的に変更したりする場合に有効です。
const elements = document.querySelectorAll('h1');
for (const element of elements) {
element.style.color = 'red';
}
この例では、JavaScriptを使用して、すべてのh1要素の色を赤に設定しています。
フレームワークを使用する
BootstrapやFoundationなどのCSSフレームワークを使用すると、あらかじめ定義されたスタイルクラスを利用することができます。フレームワークを使用することで、コードを簡潔に記述し、メンテナンス性を向上させることができます。
<div class="container">
<h1>見出し</h1>
<p>本文</p>
</div>
この例では、Bootstrapを使用して、containerクラスとh1クラスを要素に適用しています。
属性セレクターを使用する
属性セレクターを使用して、要素の属性値に基づいてスタイルを適用することができます。この方法は、IDやクラスを使用するよりも、より汎用的な方法で要素を特定する場合に有効です。
a[href^="https://"] {
color: blue;
}
この例では、href属性の値が "https://" で始まるすべてのリンクの文字色を青に設定しています。
子孫セレクターを使用する
子孫セレクターを使用して、親要素の子孫要素をすべて選択することができます。この方法は、ネストされた要素をスタイル設定する場合に有効です。
ul li {
list-style-type: disc;
}
この例では、ul要素の子孫であるすべてのli要素に箇条書き記号を設定しています。
組み合わせセレクターを使用する
組み合わせセレクターを使用して、複数のセレクターを組み合わせて、より複雑な条件で要素を特定することができます。この方法は、複数の条件を満たす要素にのみスタイルを適用する場合に有効です。
p:first-child {
font-weight: bold;
}
この例では、ページ内の最初のp要素のみを太字にしています。