スパンを使用せずに h1 タグの最後の単語のスタイルを設定するにはどうすればよいですか?

スパンを使用せずに h1 の最後の単語の色を変更する

CSS は HTML 要素をスタイル設定するための広範な機能を提供しますが、それには欠けています文字列内の特定の単語をターゲットにする直接的な方法。たとえば、h1 見出しの最後の単語の色を変更したい場合があります。最後の単語をspanタグで囲んでスタイル設定するのが一般的な解決策ですが、純粋なCSSを使用したよりエレガントなアプローチはありますか?

CSSランドスケープの探索

残念ながら、純粋な CSS では、最後の単語をターゲットにするネイティブ セレクターはありません。 CSS の特異性ルールでは、一般的なセレクターよりもインライン スタイルまたはより具体的なセレクターの使用が優先されます。したがって、h1:last-child のようなルールを使用しても、最後の単語を特別に分離することはありません。

JavaScript ライブラリの力

この制限を克服するには、 JavaScript ライブラリの力。そのようなライブラリの 1 つが、高度な要素操作機能を提供する Lettering.js です。

解決策 Lettering.js を使用する

lettering.js を使用すると、::last を作成できます。 -単語セレクターを使用し、それに応じてスタイルを設定します。その仕組みは次のとおりです。

<code class="html"><h1 id="main-title">main title</h1></code>

<code class="js">// Initialize lettering.js
lettering.js(document.querySelector('h1'));

// Append the ::last-word selector
h1[id="main-title"]::last-word {
  color: #00f;
}</code>

これで、span タグを使用せずに、h1 見出しの最後の単語が異なる色で表示されます。このソリューションを機能させるには、HTML ドキュメントに Lettering.js を忘れずに含めてください。

以上がスパンを使用せずに h1 タグの最後の単語のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。