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