CSSセレクターの正しい使い方

CSS セレクターの正しい使用方法

CSS (Cascading Style Sheets) セレクターは、スタイルを選択して HTML 要素に適用するための重要なツールです。 CSS セレクターを適切に使用すると、Web ページのスタイルをより正確かつ柔軟にすることができます。以下では、CSS セレクターの正しい使用方法と具体的なコード例を詳しく説明します。

1. 基本セレクター

1. 要素セレクター: HTML 要素のタグ名を選択してスタイルを適用します。たとえば、すべての段落 (p) 要素のフォントの色を赤に設定するには:

p {
  color: red;
}

2. クラス セレクター: HTML 要素のクラス名を選択してスタイルを適用します。クラス セレクターはピリオド (.) で始まり、その後にクラス名が続きます。たとえば、クラス名が「intro」のすべての要素の背景色を黄色に設定するには:

.intro {
  background-color: yellow;
}

3. ID セレクター: HTML 要素の ID を選択してスタイルを適用します。 ID セレクターはシャープ記号 (#) で始まり、その後に ID 名が続きます。たとえば、ID 名が「logo」の要素の幅を 200 ピクセルに設定するには、次のようにします。

#logo {
  width: 200px;
}

2. 組み合わせセレクター

1. 子セレクター: スタイルを適用します。要素の子要素を選択します。サブセレクターでは大なり記号 (>) を使用します。たとえば、article 要素の下にあるすべての p 要素のフォント サイズを 14 ピクセルに設定するには:

article > p {
  font-size: 14px;
}

2. 子孫セレクター: 要素の子孫要素を選択してスタイルを適用します。子孫セレクターではスペースが使用されます。たとえば、親要素クラス「セクション」の下にあるすべての p 要素のフォントの色を緑色に設定するには:

.section p {
  color: green;
}

3. 隣接する兄弟セレクター: で選択することによって、スタイルが要素のに適用されます。隣接する兄弟要素。隣接する兄弟セレクターにはプラス記号 ( ) が使用されます。たとえば、ID「header」の後に表示されるすべての p 要素のフォントを太字に設定するには:

#header + p {
  font-weight: bold;
}

4. 一般的な兄弟セレクター: スタイルを適用する要素との兄弟関係を選択します。すべての要素。ユニバーサル兄弟セレクターではチルダ (~) が使用されます。たとえば、ID が「sidebar」の後に表示されるすべての div 要素の境界線を 1 ピクセルの実線に設定するには:
#

#sidebar ~ div {
  border: 1px solid;
}

3. 属性セレクター

[attribute] 属性セレクター: 指定された属性を持つ要素を選択してスタイルを適用します。たとえば、href 属性を持つすべての a 要素にテキスト装飾の下線を設定するには:

a[href] {
  text-decoration: underline;
}

[attribute=value] 属性セレクター: 指定された属性および属性値スタイルを持つ要素を選択することによって適用されます。たとえば、すべての a 要素のターゲット属性値が「_blank」であるすべての要素のフォントの色を青に設定するには:

a[target="_blank"] {
  color: blue;
}

[attribute^=value] 属性セレクター: を選択します。指定された値で始まる属性値を持つ要素にスタイルを適用します。たとえば、href 属性値が「http」で始まるすべての a 要素のフォントの色を赤に設定するには、次のようにします。

a[href^="http"] {
  color: red;
}

4. 疑似クラス セレクター

Pseudo-クラス セレクターは、要素の特別な状態または位置を選択できます。一般的な疑似クラス セレクターには、:hover、:active、:focus などが含まれます。これらは、マウスオーバー、アクティブ化、フォーカスなどの状態で要素を選択するために使用されます。疑似クラス セレクターの一般的な例をいくつか示します。

:hover 疑似クラス セレクター: マウスが要素上にあるときの状態を選択します。たとえば、すべてのリンクのマウスオーバー時に色を変更するには:

a:hover {
  color: purple;
}

:nth-child(n) 疑似クラス セレクター: 要素の n 番目の子要素を選択します。たとえば、リストの偶数行の要素の背景色を設定するには:

li:nth-child(even) {
  background-color: lightgray;
}

上記は、CSS セレクターの基本的な使用法と例です。読者の理解と理解に役立つことを願っています。 CSS セレクターを適用することで、正確かつ柔軟なスタイル制御を実現し、Web デザインの可能性を広げます。

以上がCSSセレクターの正しい使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。