CSS セレクターを使用する基本的な構文を学習します。

基本的な CSS セレクター構文をマスターするには、特定のコード例が必要です。

CSS セレクターはフロントエンド開発の非常に重要な部分であり、選択するために使用できます。ドキュメントの HTML のさまざまな要素を変更します。基本的な CSS セレクター構文をマスターすることは、効率的なスタイルシートを作成するために重要です。この記事では、いくつかの一般的な CSS セレクターと対応するコード例を紹介します。

要素セレクター 要素セレクターは最も基本的なセレクターであり、要素のタグ名を通じて対応する要素を選択できます。たとえば、すべての段落 (p 要素) を選択するには、次のコードを使用できます。

p { color: blue; } クラス セレクター クラス セレクターを使用すると、1 つ以上のクラス名を段落に追加できます。 HTML 要素 、クラス名で対応する要素を選択します。クラス名は . で始まります。たとえば、 highlight という名前のクラスをテキストに追加するには、次のようにします。

.highlight { background-color: yellow; } ID セレクター ID セレクターを使用すると、一意の ID を HTML 要素に追加できます。対応する要素を ID で選択します。 ID名は #で始まります。たとえば、ID header を持つ要素を追加します。

#header { font-size: 24px; } 子孫セレクター 子孫セレクターは、特定の要素の子孫要素を選択するために使用できます。スペースを使用して 2 つのセレクターを接続します。たとえば、 #container の下にあるすべての p 要素を選択するには、次のようにします。

#container p { color: red; } 子要素セレクター 子要素セレクターでは、特定の要素の直接の子。 > を使用して 2 つのセレクターを接続します。たとえば、 #navigation li :

#navigation > li { display: inline; } pseudo-class selector pseudo-class selector の下にあるすべての直接の子要素を選択するにはホバー状態、アクセス状態など、特定の状態で要素を選択できます。疑似クラス セレクターは : で始まります。たとえば、ホバー時にリンクを選択するには:

a:hover { text-decoration: underline; } 隣接兄弟セレクター 隣接兄弟セレクターは、別の要素の直後にある要素を選択します。 を使用して 2 つのセレクターを接続します。たとえば、 h1 要素の直後の p 要素を選択するには、次のようにします。

h1 + p { font-weight: bold; } 属性セレクター 属性セレクターは、次のように選択できます。指定された属性を持つ要素は、属性の値に基づいてより正確に選択できます。属性セレクターは、角括弧 [] を使用して属性名と属性値を指定します。たとえば、 target=_blank ですべてのリンクを選択するには:

a[target="_blank"] { color: pink; } 上記は一般的に使用される CSS セレクターの一部ですが、これは氷山の一角にすぎません。より多くのセレクター構文をマスターすると、HTML 要素をより適切に操作し、柔軟で保守可能なスタイル シートを作成できるようになります。

CSS セレクターを使用する基本的な構文を学習します。

関連記事