CSS または JavaScript を使用して HTML で要素タイプの最初のインスタンスをスタイル設定する方法

ドキュメント全体内の特定の要素タイプの最初のインスタンスを識別する

質問:

CSS を利用するにはどうすればよいですか?または JavaScript を使用して、HTML ドキュメント全体で特定の要素タイプの最初の出現をターゲットにしてスタイルを設定します。

答え:

CSS ベースのソリューション

残念ながら、CSS だけでは機能は提供されません。文書全体で最初に出現した要素タイプと一致します。 CSS 仕様に従って、:first-of-type 擬似クラスは、親要素内のその型の最初の兄弟にのみ適用されます。

JavaScript ベースのソリューション

1. :first-of-type エミュレーション

JavaScript を使用すると、カスタム クラス「first-of-type」を導入し、querySelector() メソッドを利用して最初に一致するものを取得することで、この機能を実現できます。目的のタイプの要素。次に、このカスタム クラスを取得した要素に割り当てます:

document.querySelector('p').className += ' first-of-type';

2。カスタム マッチング関数

特定の要素タイプの最初の出現を識別してスタイルを設定するカスタム JavaScript 関数を開発することもできます。

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

この関数は 2 つのパラメーターを受け入れます: 要素検索したいものと、対象とする出現のインデックス。すべての兄弟要素を反復処理し、必要なスタイルを適用して、指定されたタイプの最初の要素を返します。

以上がCSS または JavaScript を使用して HTML で要素タイプの最初のインスタンスをスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。