【CSS】よく使われるセレクタの書き方

CSS (Cascading Style Sheets)は、HTMLやXMLドキュメントの見た目を指定するために使用されるスタイルシート言語です。セレクタは、CSSのスタイルを適用する要素を選択するために使用されます。以下は、よく使用されるCSSセレクタの書き方について説明します。

タグ名セレクタ: HTMLタグの名前を指定します。例えば、すべての<p>タグにスタイルを適用する場合は、p { ... }と書きます。

クラスセレクタ: HTMLタグにクラス属性を設定し、その属性値を指定します。クラスセレクタは、.で始まります。例えば、<p class="warning">タグにスタイルを適用する場合は、.warning { ... }と書きます。

IDセレクタ: HTMLタグにID属性を設定し、その属性値を指定します。IDセレクタは、#で始まります。例えば、<p id="important">タグにスタイルを適用する場合は、#important { ... }と書きます。

子孫セレクタ: 子孫要素にスタイルを適用します。子孫セレクタは、祖先要素 子孫要素と書きます。例えば、<div>タグ内の<p>タグにスタイルを適用する場合は、div p { ... }と書きます。

直近の子孫セレクタ: 直近の子孫要素にスタイルを適用します。直近の子孫セレクタは、祖先要素 > 子孫要素と書きます。例えば、<div>タグ直下の<p>タグにスタイルを適用する場合は、div > p { ... }と書きます。

属性セレクタ: HTMLタグの属性を指定します。属性セレクタは、[attribute=value]と書きます。例えば、<a href="https://example.com">タグにスタイルを適用する場合は、a[href="https://example.com"] { ... }と書きます。

似たセレクタ: 似た要素にスタイルを適用します。例えば、すべての<h1>~<h6>タグにスタイルを適用する場合は、h1, h2, h3, h4, h5, h6 { ... }と書きます。

ユニバーサルセレクタ: すべてのHTML要素にスタイルを適用します。ユニバーサルセレクタは、*で表します。例えば、すべてのHTML要素にスタイルを適用する場合は、* { ... }と書きます。

これらは、CSSでよく使用されるセレクタの書き方です。使用するセレクタは、スタイルを適用する要素や条件に応じて選択することができます。また、複数のセレクタを組み合わせることで、より詳細なスタイルを指定することができます。