How to Style the Last Word in an h1 Tag Without Using a Span?

Changing the Color of the Last Word in an h1 Without Using a Span

CSS provides extensive capabilities for styling HTML elements, but it lacks a direct way to target specific words within a string. For instance, you may want to change the color of the last word in an h1 heading. While wrapping the last word in a span tag and styling it is a common solution, is there a more elegant approach using pure CSS?

Exploring the CSS Landscape

Unfortunately, in pure CSS, there's no native selector to target the last word. The specificity rules of CSS prioritize the use of inline styles or more specific selectors over general ones. Therefore, using rules like h1:last-child will not isolate the last word specifically.

The Power of JavaScript Libraries

To overcome this limitation, we can harness the power of JavaScript libraries. One such library is lettering.js, which provides advanced element manipulation capabilities.

Solution Using lettering.js

Using lettering.js, we can create a ::last-word selector and style it accordingly. Here's how it works:

<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>

Now, the last word in your h1 heading will be colored differently without using a span tag. Remember to include lettering.js in your HTML document for this solution to work.

The above is the detailed content of How to Style the Last Word in an h1 Tag Without Using a Span?. For more information, please follow other related articles on the PHP Chinese website!