属性セレクター

さまざまなパラメーターを含む要素のスタイルを変更するために、属性セレクターが CSS に導入されました。これらを使用すると、特定のパラメータの存在またはその値に基づいてタグのスタイルを設定できます。属性セレクター - 1

注:属性セレクターは Internet Explorer バージョン 7.0 以降でサポートされており、例が正しく動作するには正しい <!DOCTYPE> を追加する必要があります。 このようなセレクターの典型的な使用法をいくつか見てみましょう。

単純な属性セレクター

特定の属性が指定されている場合、要素のスタイルを設定します。この場合、その意味は重要ではありません。このようなセレクターを使用するための構文は次のとおりです。

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }

セレクター名と角括弧の間にスペースは使用できません。例 12.1 は、title パラメータが追加されたときに <Q> タグがどのようにスタイル設定されるかを示しています。 例12.1。パラメータに応じた要素のタイプ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюсона-Мержевича">После
  того, How веб-page будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>

例の結果を図に示します。12.1 属性セレクター - 2

この例では、title パラメータが追加されると、7lt;Q> コンテナ内のテキストの色が変わります。Q[title] セレクターの場合、属性は Q セレクターから継承されるため、属性を繰り返す必要がないことに注意してください。

値を含む属性セレクター

特定のパラメータに特定の値が指定されている場合、要素のスタイルを設定します。アプリケーションの構文は次のとおりです。

[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }

最初のケースでは、スタイルは、指定された属性値を含むすべての要素に適用されます。そして 2 番目では、特定のセレクターのみに適用されます。例 12.2 は、A タグにパラメータが含まれている場合にリンクスタイルを変更する方法を示していますtarget="_blank"。この場合、リンクは新しいウィンドウで開きます。これを表示するには、スタイルを使用してリンクテキストの前に小さな画像を追加します。 例12.2。リンクを新しいウィンドウで開くスタイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] {
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

この例の結果を以下に示します (図 12.2)。 属性セレクター - 3

この例では、属性を使用して画像がリンクに追加されますbackground。その機能は、繰り返しの背景画像を作成することですが、引数を使用して背景の繰り返しをキャンセルするとno-repeat、単一の画像になります。

属性は特定の値で始まります

属性が指定された値で始まる場合、要素のスタイルを設定します。アプリケーションの構文は次のとおりです。

[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }

最初のケースでは、スタイルは、指定された属性値で始まるすべての要素に適用されます。そして 2 番目では、特定のセレクターのみに適用されます。サイトで、通常のリンクと外部リンク (他のサイトにつながるリンク) のスタイルを分離する必要があると仮定します。Aタグに新しいクラスを追加しないようにするには、属性セレクターを使用します。外部リンクは、アドレスにプロトコルを追加することを特徴とします。たとえば、ハイパーテキストドキュメントへのアクセスには HTTP プロトコルが使用されます。Aしたがって、例 12.3 に示すように、外部リンクはキーワード http:// で始まり、それをセレクターに追加します。例12.3。外部参照スタイルの変更

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] {
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя link на сайт htmlbook.ru</a></p>
 </body>
</html>

例の結果を以下に示します (図 12.3) 属性セレクター - 4

。この例では、外部リンクが太字で強調表示されています。例 12.2 に示す手法を使用して、リンクが別のサイトにつながっていることを示す小さな画像をリンクに追加することもできます。

属性は特定の値で終わります

属性が指定された値で終わる場合、要素のスタイルを設定します。アプリケーションの構文は次のとおりです。

[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }

最初のケースでは、スタイルは、指定された属性値で終わるすべての要素に適用されます。そして 2 番目では、特定のセレクターのみに適用されます。このようにして、例 12.4 に示すように、ru ドメインのサイトと com などの他のドメインのサイトのスタイルを自動的に分離できます。 例12.4。さまざまなドメインのスタイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если link заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если link заканчивается на .com */
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> |
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>

この例には、異なるドメインにつながる 2 つのリンク、comおよびが含まれていますru。同時に、そのような各リンクには、スタイルを使用して追加された独自の背景画像があります。スタイル属性は、パラメータが「.ru」または「.com」で終わるリンクにのみ追加されますhref。ドメイン名にスラッシュ ( http://www.yandex.ru/ ) またはページアドレス ( http://www.yandex.ru/fun.html ) を追加すると、末尾と末尾が変更されることに注意してください。スタイルは適用されません。この場合、属性内のどこにでも特定の値を配置できるセレクターを使用することをお勧めします。

値は属性内の任意の場所に出現します

値が一部である特定の属性を持つセレクターにスタイルを適用する必要がある場合のオプションがあります。ただし、引数がこの値で始まるか終わるかは正確にはわかりません。その場合は、次の構文を使用する必要があります。

[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }

値は、先頭、末尾、またはその間のどこかなど、引数内のどこにでも出現できます。重要なことは、それがその一部であるということです。したがって、例 12.5 は、「htmlbook」という単語が表示されるリンクのスタイルの変更を示しています。 例12.5。さまざまなサイトに合わせたスタイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] {
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Tagи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>

この例の結果を図に示します。12.4 属性セレクター - 5

他にも引数セレクタの種類はいくつかありますが、使用頻度が非常に低いため説明を省略します。元のソースへのリンク: http://stepbystep.htmlbook.ru/?id=54

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION