属性値によるセレクター。 CSS: 疑似要素と属性セレクタータグ属性の特別なセレクター

14.07.2021

場合によっては、HTML にクラスや ID を追加できずに、クラスや ID が指定されていないページ要素にアクセスする必要があることがあります。 CSS 属性によって要素にアクセスすることが解決策です。

多くの場合、そのような状況が発生するのは、 htmlコードは外部スクリプトによって生成され、ユーザーが変更することはできません。しかし同時に、スタイルを設定したり、CSS で外観を変更したりする必要があります。

したがって、セレクターのようなものがあります html属性。このヘルプを使用すると、CSS の属性によって任意の要素にアクセスできます。属性は、src、href、data-*、title、name、rel、alt などの html タグの属性と同じです。

CSS では、特定の属性の値に完全または部分的に一致するセレクターを指定できます。

いくつかの例を見てみましょう: CSS 属性による任意の要素へのアクセス

たとえば、PayPal コードによって生成されたピクセルアイコンがあるとします。モバイル版隠す必要があります（非常に邪魔になるため）。そうすれば、純粋な CSS で非常に簡単に実行できます。

img(表示: なし; )

または、たとえば、「送信済み」で始まるタイトルを持つすべての要素を非表示にする必要があります。これをやってみましょう:

... ... ... div( 表示: なし; )

このようなセレクターがいくつかあります。

– この属性を持つすべての要素
– 属性が正確に = 値であるすべての要素
– 属性に値が含まれるすべての要素 (単語全体である必要があります)
– 属性が値で始まるすべての要素 (単語全体である必要があります)
– 属性が値で始まるすべての要素 (単語全体ではない場合があります)
– 属性が値で終わるすべての要素 (単語全体ではない可能性があります)
– 属性に値が含まれるすべての要素 (単語全体ではなく、一連の文字を指定できます)

CSSにはセレクターがたくさんあります。それらの中には、スタイルクラスや ID を割り当てずに特定の要素を選択できるものもあります。たとえば、css 属性セレクターなどです。

HTML属性で要素を選択する方法

属性セレクターは、属性または値を持つ属性が角括弧内に書かれているセレクターです。明確にするためにいくつかの例を示します。
* – 任意の値を持つ href 属性を持つすべての要素を選択します。
input – disable 属性を持つすべての入力要素 (すべての無効なフィールド) を選択します。
input – タイプがpasswordであるすべてのフィールド、つまりパスワードを入力するフィールドを選択します。
img – src 属性 = “logo.png” が設定されている画像を選択します。

ご覧のとおり、CSS 属性セレクターの作成はそれほど難しくありません。最も重要な違いは角括弧です。角括弧には、属性のみが記述されるか、属性とその正確な値が記述されます。しかし、これらのセレクターの機能はそれだけではありません。

高度な CSS 属性セレクター

次のセレクターはすべて大文字と小文字が区別されます。
行頭で検索する
div – 「block」で始まるスタイルクラスを持つすべての div を選択します。したがって、たとえば、「block-head」、「block-3」、「blocknote」のブロックが選択されます。重要なことは、意味の先頭にキーワードがあることです。

行末の検索
A – アドレスが .rar で終わるすべてのリンクを選択します。したがって、Web サイトで何かをダウンロードできる場合は、アーカイブファイルへのすべてのリンクの横にアイコンを追加できます。

値内のあらゆる部分文字列を検索する
span – クラス名に「art」が含まれるすべてのspanタグを名前のどこかに選択します。したがって、たとえば、party、clart、art-1 のクラスを持つスパンが選択されます。

プレフィックスを検索する
p – 「first」と完全に一致する名前を持つ、またはクラス名で始まる接頭辞 first- を含むスタイルクラスを持つ段落を選択します。

意味の範囲内で単語を見つける
input – identifier 属性の値に text という単語が含まれるすべての入力要素を選択します。含める必要があるのは部分文字列ではなく単語であるという点で、どこでも部分文字列を検索するのとは異なります。

最後の 2 つのオプションはめったに使用されず、頻繁に役立つ可能性は低いですが、一般的な開発では知っておくことができます。

属性セレクターは何に役立ちますか?

このようなセレクターを使用すると、スタイルクラスを与えずに多くの HTML 要素を選択できます。場合によっては、この方法を使用するとコードを短縮し、作業を簡素化できます。たとえば、上ではアーカイブのアイコンを使用した例を示しました。ここで別のアイデアが現れました。たとえば、Web サイトで他のリソース (Wikipedia など) にリンクすることがよくあり、Wikipedia へのリンクの横に、他のリンクには表示すべきではない特別なアイコンを表示したいとします。

次のように実装できます。

A (CSS ルール)

実際、属性セレクターを使用する方法は他にもたくさんあります。必要に応じて作業をある程度簡素化できます。 CSS を使用し、ブログを購読して、Web 開発について詳しく学びましょう。

疑似要素を使用すると、ドキュメントの特定の部分のスタイルを設定できます。たとえば、 pseudo-element::first-line は、指定された要素の最初の行にのみスタイルを追加することを目的としています。 CSS3 仕様では、疑似要素は二重コロン「::」で始まります。

P::最初の文字 (フォントサイズ: 120%; )

二重コロンは、疑似クラスと疑似要素を視覚的に区別するために CSS3 に導入されました。ただし、CSS2 で追加された疑似要素 (最初の文字、最初の行、その前後など) は単一のコロンで記述することができます。この構文は CSS3 仕様より前に使用されており、すべてのブラウザでサポートされています。二重コロン構文は新しいブラウザでのみサポートされており、CSS3 で追加された ::selection 疑似要素にのみ適用する必要があります。

注: 各セレクターには、疑似要素を 1 つだけ含めることができます。これはセレクターの最後で定義する必要があります: #header .menu span::first-letter ( color: green; )

擬似要素::最初の文字

pseudo-element::first-letter を使用すると、親要素のテキストの最初の文字にスタイルを適用できます。たとえば、段落の最初の文字にスタイルを設定するには、それを要素で囲んでスタイルを適用する必要があります。

文書タイトル .firstletter ( フォントサイズ: 150%; フォントの太さ: 太字; )

私たちのテキスト

試す "

または、::first-letter 疑似要素を使用してテキストの最初の文字をスタイル設定することもできます。この場合、HTML マークアップに追加の要素を追加する必要はありません。

文書タイトル p::first-letter ( font-size: 150%; font-weight: 太字; )

私たちのテキスト

試す "

疑似要素::最初の行

pseudo-element::first-line は、要素内のテキストの最初の行にスタイルを適用します。

P ( 幅: 200px; ) p::first-line ( カラー: ブルー; ) 試してみる »

::first-line 擬似要素の特徴は、最初の行のみのスタイルを設定することです。その幅は要素の幅に依存します。つまり、画面が小さい場合やブラウザウィンドウが縮小されている場合、最初の行の幅は変わりますが、デザインは変わりません。

疑似要素::前および::後

::before および ::after 擬似要素は、生成されたコンテンツをドキュメントに追加するために使用されます。これらを使用して、生成されたコンテンツを指定された要素内のコンテンツの前後に配置できます。追加されるコンテンツを決定するには、次を使用します。 CSSプロパティコンテンツ。

かなりボリュームのあるテキストがあり、そこにはリンクが含まれていますが、デザイン的にはテキストの残りの部分と実質的に何の違いもないとします。そして、これがリンクであることをユーザーに示すために、各リンクの前に小さなアイコンを配置する必要があります。

A ( text-decoration: none; color: black; ) a::before ( content: url("link.png"); ) 試してみる »

属性セレクター

属性セレクターは、すべての最新のブラウザーでサポートされています (例外は IE6 ですが、現在は属性セレクターとして分類されていません) 最新のブラウザ、一部のユーザーがまだそれを使用しているという事実を考慮する価値があります。したがって、IE6 を含むすべてのブラウザで同等に機能するコードを作成する必要がある場合は、属性セレクターの使用を控えることをお勧めします。

属性セレクターを使用すると、識別子やクラスを使用せずに特定の要素を選択できます。要素にアクセスするには、目的の要素に特定の属性が含まれているかどうかを知る必要があるだけです。

Img (枠線: 1px 赤一色; )

上の例では、ルールはすべての要素に適用されます。、 alt 属性を持ちます。ただし、単に属性によって要素を選択するだけでなく、属性セレクターを使用すると、属性値に基づいて要素を選択できます。

element[attribute^="value"] ^= は「...で始まる」を意味します。
element[attribute$="value"] - 部分文字列一致のある属性セレクター。 $= 演算子は「...で終わる」を意味します。
element[attribute*="value"] - 部分文字列が一致する属性セレクター。 *= 演算子は、「部分文字列が含まれている...」を意味します。

例として、外部リソースを参照するリンクの設計を見てみましょう。電子メールアドレス拡張子が .pdf のファイル:

A ( パディング左: 20px; 背景イメージ: url("img1.png"); 背景リピート: no-repeat; ) a ( パディング左: 20ピクセル; 背景イメージ: url("img2.png") ; 背景-繰り返し: no-repeat; ) a (padding-left: 20px; 背景-画像: url("img3.png"); 背景-繰り返し: no-repeat; ) 試してください »

このような状況では、属性セレクターは、Web ページのデザインに魅力的な追加を加えるのに役立ちます。

このレッスンでは、ページ上の要素を属性によって検索する方法を学びます。

jQueryではCSSの仕様に従って属性による要素の選択が行われます。

属性を使用して要素を選択する場合、一部の属性にはスペースで区切られた複数の値が含まれる場合があることに注意してください。

例えば：

... ... ... // 属性 $("a") を持つ要素 a を選択します。

セレクター式の属性値は引用符で囲む必要があります。これは、次のいずれかの方法で行われます。

一重引用符で囲んだ二重引用符: $("a") 。
内側の一重引用符二重引用符: $("").
一重引用符内で一重引用符をエスケープします: $("a") 。
二重引用符内で二重引用符をエスケープしました: $("a") 。

jQueryでは、さまざまなセレクターを使用して属性ごとに要素を検索できます。さらに、複数の属性セレクターを組み合わせて要素を選択することもできます。この場合、指定された各セレクターに一致する要素のみが選択されます。

jQuery - 属性によって要素を検索するためのセレクター

指定された文字列 (値) と等しい値を持つ、または指定された文字列 (値) の後にハイフンが続く、指定された属性 (名前) を持つ要素を選択します。

たとえば、alert と等しいか、alert- で始まる値を持つ class 属性を持つすべての div 要素を選択します。

...

... ... ... ... ... //値alert、またはalert- $("div"); で始まる値を持つクラス属性を持つすべての div 要素を選択します。

指定された属性 (名前) と、指定された部分文字列 (値) を含む値を持つ要素を選択します。

例: 値として部分文字列 youtube を含む href 属性を持つすべての要素を選択します。

...... ... //値が部分文字列 youtube $("") を含む //href 属性を持つ要素を選択します。

指定された属性 (名前) を持ち、その値の 1 つとして指定された値 (値) を含む (つまり、スペースで別の値と区切られている)、またはその値 (値) と等しい要素を選択します。

たとえば、値の 1 つとして値 btn を含む (つまり、スペースで別の値と区切られている)、または btn と等しい値を持つ class 属性を持つすべての a 要素を選択します。

... ... 送信 ... ... $("a");

指定された属性 (名前) と、指定された値 (値) で終わる値を持つ要素を選択します。

たとえば、「.zip」で終わる href 属性を持つすべての要素を選択します。

... ... ... //href 属性値が .zip で終わるすべての a 要素を選択 $("a");

指定された属性 (名前) が value に設定されている要素を選択します。

たとえば、value ボタンを使用して、type 属性を持つすべての要素を選択します。

注文情報 $("");

指定された属性 (名前) を持たない要素、または指定された属性 (名前) はあるが指定された値 (値) を含まない要素を選択します。

たとえば、rel 属性を持たない要素、または rel 属性はあっても nofollow 値が含まれない要素を選択します。

... ... ... ... $("a");

指定された属性 (名前) と、指定された値 (値) で始まる値を持つ要素を選択します。

たとえば、btn クラスと、値が「http」で始まる href 属性を持つすべての a 要素を選択します。

...... ... $("a.btn");

指定された属性 (名前) を持つ要素を選択します。この属性 (名前) の値は任意です。

たとえば、alt 属性を持つ画像 (img) を選択します。

$("img");

- 指定された属性 (name1 および name2) が対応する値 (Value1 および Value2) を持つ要素を選択します。

必要に応じて、さまざまな属性セレクターを組み合わせて要素を選択できます。この場合、指定されたすべてのセレクターに一致する要素のみが選択されます。

$(""); //attr1 - 属性セレクター 1 //attr2 - 属性セレクター 2 //attrN - 属性セレクター N

たとえば、id 属性、http で始まる href 属性、および値の 1 つとして btn を含む値または btn と等しい値を持つ class 属性を持つ要素を選択します。

... ... $("a");

jQuery ライブラリを使用すると、元の値を変更することで、ラップされたセットの要素のプロパティと属性を操作できます。新しいプロパティを設定したり、元のプロパティの値を取得および変更したりできます。クラスを削除または追加することで、要素の表示スタイルを動的に変更できます。

要素のプロパティと属性の操作 1. クラスの追加と削除 1.1. Method.addClass()

指定されたクラス (または複数のクラス) をラップされたセットの各要素に追加します。にこの方法追加したクラスのスタイルを事前に作成する必要があります。このメソッドは古いクラスを削除せず、単に新しいクラスを追加します。

AddClass(クラス名) クラス名はスペースで区切られた 1 つ以上のクラス名です。

.addClass(function) 関数 - 既存のクラスに追加する 1 つ以上のスペースで区切られたクラス名を返します。セット内の要素のインデックスとクラスの既存の名前を引数として受け取ります。

1.2. Method.removeClass()

ラップされたセットのすべての要素から指定されたクラス名を削除します。

RemoveClass(クラス名) クラス名 - オプションのパラメータ。スペースで区切られた 1 つ以上のクラス名。クラス名が指定されていない場合、メソッドはセットの要素から既存のクラスをすべて削除します。クラス名を指定した場合は、指定したクラスのみを削除します。

.removeClass(function) 関数 - 既存のクラスから削除される 1 つ以上のスペースで区切られたクラス名を返します。セット内の要素のインデックスとクラスの古い名前を引数として受け取ります。

1.3. Method.toggleClass()

セット内の各要素から 1 つ以上のクラスを追加または削除します。ラップされたセットの各要素は個別にチェックされます。このメソッドは、指定されたクラス名が要素に存在しない場合は追加し、存在する場合は要素から削除します。要素の視覚的表現を切り替えるために使用されます。

ToggleClass(クラス名) クラス名は、セットの要素ごとに切り替えられる 1 つ以上のスペースで区切られたクラス名です。

.toggleClass(classname, boolean) classname - セットの要素ごとに切り替えられる 1 つ以上のスペースで区切られたクラス名。

ブール値 - 指定されたクラスをインストール、追加、または削除します。 True の場合はクラスを追加し、False の場合はクラスを削除します。

このメソッドは、セットの最初の要素の属性値を取得するか、セットの要素に 1 つ以上の属性値を設定します。

2.1. Method.attr() .attr(attributename) 属性名 - ラップされたセット内の最初の要素の属性値を返します。属性が欠落している場合は、未定義を返します。

.attr(attributename, value) 属性名 value は、ラップされたセットのすべての要素の属性値として追加される文字列または数値です。

.attr(attributes) 属性 - オブジェクトのプロパティからコピーされた値が、ラップされたセットのすべての要素に設定されます。

.attr(属性名, 関数) 属性名 - 指定された値に設定される属性の名前を指定します。

function - セット内の要素のインデックスと属性の古い値を引数として受け取ります。戻り値は属性の値に設定されます。 2.2. Method.removeAttr()

ラップされたセットの各要素から指定された属性を削除します。

RemoveAttr(attributename) 属性名は、削除する属性を識別する文字列です。

セット内の最初の要素の現在の幅を返すか、セット内の各要素の幅を設定します。デフォルトの測定単位は px です。このメソッドは、取得した値を数学的計算に使用する場合に使用できます。寸法はインデントやフレームの厚みを考慮せずに計算され、測定単位は指定されません。ブラウザウィンドウのサイズを変更すると、要素の寸法が変化する場合があります。

width() このメソッドはパラメータなしで呼び出されます。単位を指定せずに、セット内の最初の要素の現在の幅の値を返します。

.width(value) value は、セットの各要素に設定される幅の整数値または文字列値です。

.width(function) 関数 - 要素のインデックスとプロパティの古い値を引数として受け取り、戻り値はすべての要素の幅に設定されます。

4.2. メソッド.height()

セット内の最初の要素の現在の高さの値を返すか、セット内の各要素の高さを設定します。

Height() このメソッドはパラメータなしで呼び出されます。セット内の最初の要素の現在の高さの値を返します。

.height(value) value は、セットの各要素に設定される高さの整数値または文字列値です。

.height(function) 関数 - 要素のインデックスとプロパティの古い値を引数として受け取り、戻り値はすべての要素の高さとして設定されます。

4.3. Method.innerWidth()

ラップされたセットの最初の要素の幅 (パディングを含む) を返すか、ラップされたセットの各要素に設定します。

InnerWidth() このメソッドはパラメーターなしで呼び出されます。セット内の最初の要素の現在の内側の幅を返します。

ラップされたセット内の最初の要素の幅を返します。これらの寸法には、フレームの厚さとインデントの幅が含まれます。