最新のCSSセレクター完全ガイド：2024年版 |

CSS セレクターは Web 開発の基礎であり、効率的な開発には必須のスキルです。この記事では、モダンな CSS セレクターを詳しく解説し、実践的な使用例を交えながら説明していきます。

基本的なセレクター

まずは基本的なセレクターから確認していきましょう。

/* タイプセレクター */
p {
  color: blue;
}

/* クラスセレクター */
.highlight {
  background-color: yellow;
}

/* IDセレクター */
#header {
  font-size: 24px;
}

/* ユニバーサルセレクター */
* {
  box-sizing: border-box;
}

疑似クラスと疑似要素

ユーザーの操作や要素の状態に応じてスタイルを適用できる便利な機能です。

/* 疑似クラス */
.button:hover {
  background-color: #0056b3;
}

/* first-childとlast-child */
li:first-child {
  border-top: none;
}

li:last-child {
  border-bottom: none;
}

/* nth-child */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 疑似要素 */
.card::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
}

属性セレクター

要素の属性値に基づいてスタイルを適用する強力な機能です。

/* 属性の存在 */
[disabled] {
  opacity: 0.5;
}

/* 完全一致 */
[type="submit"] {
  background-color: #4CAF50;
}

/* 前方一致 */
[class^="btn-"] {
  padding: 10px 20px;
}

/* 後方一致 */
[href$=".pdf"] {
  background: url('pdf-icon.svg') no-repeat;
}

/* 部分一致 */
[class*="card"] {
  border-radius: 4px;
}

組み合わせセレクター

要素間の関係に基づいてスタイルを適用します。

/* 子孫セレクター */
.container p {
  line-height: 1.6;
}

/* 直接の子要素 */
.nav > li {
  display: inline-block;
}

/* 隣接兄弟セレクター */
h2 + p {
  margin-top: 0;
}

/* 一般兄弟セレクター */
h2 ~ p {
  color: #666;
}

新しいセレクター

最新のCSSで導入された便利なセレクターを紹介します。

/* :is() - グループ化を簡略化 */
:is(h1, h2, h3) + p {
  font-size: 1.2em;
}

/* :where() - 詳細度を0に */
:where(article, aside, section) h1 {
  font-size: 2em;
}

/* :has() - 親セレクター */
.card:has(> img) {
  padding: 0;
}

/* :not() - 否定 */
button:not([disabled]) {
  cursor: pointer;
}

実践的な例を見てみましょう：

/* フォームのバリデーション */
input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --bg-color: #121212;
  }
}

/* Webフォントが読み込まれる前後でのスタイル */
:root:not(.fonts-loaded) {
  font-family: Arial, sans-serif;
}

.fonts-loaded {
  font-family: 'Custom Font', Arial, sans-serif;
}

ブラウザサポート

最新のセレクターのブラウザサポート状況（2024年4月現在）：

:is(), :where() – すべての主要ブラウザでサポート
:has() – Chrome 105+, Safari 15.4+, Firefox 121+でサポート
属性セレクター – すべての主要ブラウザで広くサポート

まとめ

モダンなCSSセレクターを使いこなすことで、以下のような利点があります：

より簡潔で保守性の高いコードが書ける
JavaScriptに頼らずにインタラクティブな要素が作れる
パフォーマンスを考慮したスタイリングが可能

セレクターの選択は、以下の点を考慮して行いましょう：

ブラウザのサポート状況
コードの可読性
パフォーマンスへの影響
保守性

より詳しい情報は、MDN Web DocsやCan I useで確認することをお勧めします。

(Visited 11 times, 1 visits today)