CSS 属性セレクタを使用して HTML DNA を接合する方法

CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘するのに役立ちます。しかし、慌てる必要はありません。属性セレクターは複雑で強力ですが、習得して使用するのは簡単です。この記事では、それらがどのように機能するかを説明し、使用方法に関するヒントをいくつか紹介します。

一般的に、最も一般的な使用方法は、HTML 属性を角括弧で囲むことであり、これは属性セレクタと呼ばれます。例えば：

[href] {
    色:シャルトリューズ;
}

href 属性を持ち、特定のセレクタを持たない HTML 要素はすべて黄緑色に変わります。属性セレクタの特性はクラスセレクタと同じである

しかし、属性セレクターを使用するとさらに多くのことが可能になります。あなたの DNA と同様に、さまざまな属性の組み合わせと値を選択するのに役立つロジックが組み込まれています。 タグ、クラス、または ID セレクターに正確に一致するだけでなく、プロパティ内の任意の属性や文字列値にも一致できます。

属性の選択

属性セレクターは、単独で使用することも、より具体的に使用することもできます。たとえば、title 属性を持つすべての div タグを選択する必要があるなどです。

div[title]

次のようにして、title 属性を持つ div の子要素を選択することもできます。

div [title]

中央のスペースは、この属性を持つ要素の子要素を選択する背景セレクターを表していることがわかります。より正確に、目的の属性値を選択することもできます。

div[title="dna"]

ほとんどの場合、属性セレクターには引用符は必要ありませんが、読みやすさが向上し、互換性が確保されると考えているため、引用符を使用します。

「my beautiful dna」や「mutating dna is fun!」など、スペース区切りのリストから文字「dna」を含む属性値を選択する場合は、等号の前にチルダ「~」を追加できます。

div[title~="dna"]

「dontblamemeblamemydna」や「his-stupidity-is-from-upbringing-not-dna」のようなタイトルを選択し、タイトルの末尾にドル記号 `$` を使用することができます。

[title$="dna"]

見出し「dnamutants」や「dna-splicing-for-all」などのプロパティ値の先頭を一致させるには、キャレット文字 `^` を使用します。

[title^="dna"]

完全な単語の先頭の値を一致させたい場合は、パイプ文字を使用できます。たとえば、「genealogy」というタイトルを選択したくないが、「gene」と「gene-data」を選択したいとします。

[title|="gene"]

任意の部分文字列に一致するあいまい検索属性演算子 `*` もあります。

[title*="dna"]

最後に知っておくべきことは、プロパティ検索で大文字と小文字を区別しないようにするためのフラグを追加できることです。 閉じ角括弧の前に `i` を追加します。

[title*="DNA" i]

これらの属性セレクターがさらに強力になるのは、スタック可能であることです。つまり、複数の一致要素を持つ要素を選択できます。

たとえば、title 属性と「genes」で終わるクラスを持つタグを見つける必要がある場合、どのように記述しますか?

a[title][class$="genes"]

HTML 要素の属性を選択できるだけでなく、疑似「科学」（疑似要素とコンテンツ宣言）を使用してテキストを印刷することもできます。

<span class="joke" title="遺伝子編集！">バイオテクノロジージャーナリストが記事の初稿を書き終えた後、最初にすることは何でしょうか？</span>

.joke:hover:after {
   内容: "回答:" attr(title);
   表示: ブロック;
}

上記のコードは、マウスをその上に置いたときにカスタム文字列を表示します。

属性セレクターを使用して選択を行う方法を確認したので、いくつかの使用例を見てみましょう。私はそれらを、一般的な使用上のヒントと診断の 2 つのカテゴリに分けました。

一般的な使用上のヒント

入力タイプの設定

電子メールと電話など、入力タイプを別々に設定できます。

入力[type="email"] {
   色: パパイヤホイップ;
}
入力[type="tel"] {
   色: アザミ;
}

携帯電話番号リンクを表示

特定のサイズの電話番号を非表示にして、電話リンクを表示し、電話で簡単に電話をかけられるようにすることができます。

span.phone {
   表示: なし;
}
a[href^="tel"] {
   表示: ブロック;
}

内部リンクと外部リンク、安全なリンクと安全でないリンク

内部リンクと外部リンクを別々に扱い、安全なリンクと安全でないリンクを別々に設定できます。

[href^="http"]{
   色: ビスク;
}
:not([href^="http"]) {
  色: ダークサーモン;
}
 
a[href^="http://"]:after {
   コンテンツ: url(unlock-icon.svg);
}
a[href^="https://"]:after {
   コンテンツ: url(lock-icon.svg);
}

ダウンロードアイコン

HTML5 が提供する属性の 1 つに「download」があります。これは、ご想像のとおり、ファイルを開こうとするのではなく、ダウンロードするようにブラウザに指示します。これは、アクセスしてもらいたいがすぐには開いてほしくない PDF や DOC に役立ちます。また、大量のファイルを連続してダウンロードするワークフローも大幅に簡単になります。ダウンロード属性の欠点は、従来のリンクと区別するためのデフォルトの視覚効果がないことです。通常はこれが望ましいのですが、そうでない場合は、次のような操作を行うことができます。

a[ダウンロード]:after { 
   コンテンツ: url(download-arrow.svg);
}

ファイルの種類を伝えるために、異なるアイコン (PDF、DOCX、ODF など) を使用することもできます。

a[href$="pdf"]:後{
   コンテンツ: url(pdf-icon.svg);
}
a[href$="docx"]:後{
   コンテンツ: url(docx-icon.svg);
}
a[href$="odf"]:後{
   コンテンツ: url(open-office-icon.svg);
}

属性セレクターをスタックすることで、これらのアイコンがダウンロード可能なリンクにのみ表示されるようにすることもできます。

a[ダウンロード][href$="pdf"]:after {
   コンテンツ: url(pdf-icon.svg);
}

非推奨/非推奨のコードを上書きまたは再利用する

私たちは皆、時代遅れのコードが使われている古いウェブサイトを見たことがあるでしょう。HTML5 より前では、属性として実装されたスタイルを上書きしたり、再適用したりする必要があったかもしれません。

<div bgcolor="#000000" color="#FFFFFF">古い穴だらけの遺伝子</div>
div[bgcolor="#000000"] { /*上書き*/
   背景色: #222222 !重要;
}
div[color="#FFFFFF"] { /*再適用*/
   色: #FFFFFF;
}

ファイルの種類を表示

デフォルトでは、ファイル タイプ入力タグで許容されるファイルのリストは表示されません。通常、疑似要素を使用してそれらを公開します。ほとんどの入力タグ (または Firefox や Edge) では疑似要素を使用できませんが、ファイル入力では使用できます。

<input type="file" accept="pdf,doc,docx">
[受け入れる]:後{
   内容: "受け入れ可能なファイルタイプ: " attr(accept);
}

HTML アコーディオン メニュー

details タグと summary タグは、HTML のみを使用して展開可能なアコーディオン メニューを作成する方法です。details タグには、summary タグと、アコーディオンを開いたときに表示されるコンテンツが含まれます。 summary をクリックすると、details タグが展開され、open 属性が追加されます。open 属性を使用して、open details タグを簡単にスタイル設定できます。

<詳細>
  <summary>遺伝子のリスト</summary>
    ロッデンベリー
    ハックマン
    ワイルダー
    ケリー
    ルエン・ヤン
    シモンズ
</詳細>
詳細[開く] {
   背景色: ホットピンク;
}

印刷リンク

a[href]:after {
   コンテンツ: " (" attr(href) ") ";
}

カスタムツール

属性セレクターを使用すると、カスタム ツールチップを簡単に楽しく作成できます。

[タイトル] {
  位置: 相対的;
  表示: ブロック;
}
[タイトル]:hover:after {
  コンテンツ: attr(タイトル);
  色: ホットピンク;
  背景色: スレートブルー;
  表示: ブロック;
  パディング: .225em .35em;
  位置: 絶対;
  右: -5px;
  下: -5px;
}

診断

これらのオプションは、ビルド プロセス中またはローカルで問題を修正する際に問題を特定するのに役立ちます。このコンテンツを本番サイトに配置すると、ユーザーにエラーが発生する可能性があります。

コントロール属性のないオーディオ

私は audio タグをあまり使用しませんが、使用する場合は controls 属性を含めることを忘れることがよくあります。 結果: 何も表示されません。 Firefox で作業している場合、オーディオ要素が非表示になっている場合、または構文やその他の問題によりオーディオ要素が表示されない場合は (Firefox でのみ機能)、次のコードが問題の解決に役立つ可能性があります。

オーディオ:not([コントロール]) {
  幅: 100ピクセル;
  高さ: 20px;
  背景色:シャルトリューズ;
  表示: ブロック;
}

代替テキストなし

alt 属性のない画像は、アクセシビリティの面で悪夢です。ページを見ただけでは見つけにくいですが、追加すると目立つようになります (また、ページ画像が読み込まれない場合、alt テキストによって画像の機能をわかりやすく説明できます)。

img:not([alt]) { /* alt属性なし */ 
  アウトライン: 2em ソリッド シャルトリューズ; 
}
img[alt=""] { /* alt属性は空白です */ 
  アウトライン: 2em ソリッド カデットブルー; 
}

非同期 JavaScript ファイル

Web ページは、コンテンツ管理システム、プラグイン、フレームワーク、コードの集合体である可能性があり、Ted は休暇中に、どの JavaScript が非同期に読み込まれ、どの JavaScript が非同期に読み込まれないかを判断することで、ページのパフォーマンスの向上に集中できると書いています。

スクリプト[src]:not([async]) {
  表示: ブロック;
  幅: 100%;
  高さ: 1em;
  背景色: 赤;
}
スクリプト:after {
  コンテンツ: attr(src);
}

Javascript イベント

JavaScript イベント属性を使用して要素を強調表示することもできます。ここでは例として OnMouseOver 属性を使用していますが、どの JavaScript イベント属性でも機能します。

[マウスオーバー時] {
   色: バーリーウッド;
}
[OnMouseOver]:after {
   コンテンツ: "JS: " attr(OnMouseOver);
}

要約する

上記は、CSS 属性セレクタを使用して HTML DNA を接合する方法を紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。