CSS プロパティ セレクターをわかりやすく説明する

CSS 属性セレクターの秘密が明らかに

CSS 属性セレクターは、特定の要素を選択してスタイル設定できる、非常に便利で強力なツールです。これらの属性セレクターは、要素の属性値、属性値が表示される場所、および属性値内の特定の文字に基づいて照合および選択できます。この記事では、具体的なコード例を通じて CSS 属性セレクターの秘密を明らかにします。

まず、基本的な CSS 属性セレクターについて学びましょう。最も一般的な属性セレクターは「[attribute]」で、指定された属性を持つ要素を選択するために使用されます。たとえば、「title」属性を持つすべての要素を選択する場合は、次のコードを使用できます:

[title] {
  color: blue;
}

この方法では、「title」属性を持つすべての要素に青色のテキスト色が適用されます。 。

単純な属性セレクターに加えて、使用できるより高度な属性セレクターもいくつかあります。たとえば、属性値セレクターを使用して、特定の属性値を持つ要素を選択できます。属性値セレクターは「[attribute=value]」と記述されます。以下は例です:

input[type="text"] {
  border: 1px solid black;
}

このコードは、「テキスト」タイプの入力ボックスをすべて選択し、その境界線のスタイルを黒い実線に設定します。

もう 1 つの強力な属性セレクターは「[attribute^=value]」です。これは、属性値が特定の文字列で始まる要素を選択できます。たとえば、リンクが「http://」で始まるすべての 要素を選択する場合は、次のコードを使用できます。

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

このようにして、「http:/」で始まるすべてのリンクが選択されます。 /」は赤色の文字色を適用します。

同様に、「[attribute$=value]」属性セレクターがあります。これは、属性値が特定の文字列で終わる要素を選択します。たとえば、リンクが「.com」で終わるすべての 要素を選択する場合は、次のコードを使用できます。

a[href$=".com"] {
  text-decoration: underline;
}

このコードは、「.com」で終わるすべてのリンクに下線を引きます。

最後に、「[attribute*=value]」属性セレクターがあります。これは、属性値に特定の文字列が含まれる要素を選択します。たとえば、リンクに「google」を含むすべての 要素を選択する場合は、次のコードを使用できます。

a[href*="google"] {
  font-weight: bold;
}

このようにして、太字スタイルが、リンクに含まれるすべてのリンクに適用されます。 「グーグル」が含まれています。