No: :last-word is not a standard CSS pseudo-class, and CSS has no general selector for the final word in an element’s text. To style that word reliably, wrap it in an element—directly in the HTML for fixed copy, or by processing the text when content is generated or changes.
Why CSS cannot select the last word
CSS selectors match elements and defined pseudo-elements, not arbitrary word tokens inside text. A pseudo-class selects an element based on a condition; MDN’s list includes structural selectors such as :last-child, :nth-last-child() and :last-of-type, but not :last-word (MDN’s pseudo-class reference).
Pseudo-elements provide limited styling hooks for parts of an element, such as ::first-letter and ::first-line; there is no standard final-word pseudo-element. The distinction between pseudo-classes and pseudo-elements is described in the CSS 2 selectors specification and MDN’s pseudo-element reference.
Why :last-child and :last-of-type are different
:last-child matches an element that is the final element child of its parent. :last-of-type matches the last sibling of a particular element type. Neither examines the words inside a text node, so neither can identify the final word of a heading or paragraph. See MDN’s :last-of-type reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Style a final word in fixed content
If you control the source HTML and the wording is stable, put a span around the word you want to style:
<h1>Your test is to make the very last <span class="last-word">word</span> different</h1>.last-word {
color: rebeccapurple;
}This is explicit and easy to maintain as long as the marked word remains the intended target. If editors change the copy, update the span as part of the content change; otherwise it may no longer surround the final word.
Handle dynamic content by wrapping the word before styling
For text that changes, first define what counts as a word for your content—for example, how punctuation, hyphenated terms, or whitespace should be treated. Then identify the final token and render it inside an element. When content is available before the HTML is sent, server-side processing can produce the marked-up result directly. When text arrives or changes in the browser, JavaScript can process it and add the wrapper.
The key is to change the markup, not to search for a CSS selector that does not exist. CSS can style the wrapper after it has been created; it does not itself rewrite a text node into separate word elements. This explicit-markup or text-processing approach is also the practical workaround discussed in the Stack Overflow discussion of selecting the last word.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Choose an approach
| Situation | Suitable approach | What to watch |
|---|---|---|
| Fixed heading or label, and you can edit HTML | Add a span around the desired word in the source. | Revise the span if the copy changes. |
| Changing content available before delivery | Wrap the final word during server-side rendering. | Use a clear tokenization rule so the intended word is identified consistently. |
| Text arrives or changes in the browser | Use JavaScript to identify and wrap the final word. | Run the processing when the text changes, and account for how punctuation and other separators are handled. |
| HTML cannot be changed and only CSS is available | There is no reliable standard CSS selector for the final word. | Ask whether the markup or content-generation process can be changed instead. |
Do not confuse the last word with the last visual line
A word that is last in the text is not necessarily on the same visual line at every screen width. Responsive wrapping and user font-size scaling can move it to another line without changing its position in the text. A CSS-only visual trick therefore cannot reliably mean “the final word” across layouts; the SitePoint discussion specifically cautions about changing content, wrapping and font scaling (SitePoint Community discussion, October 18, 2018).
Keep the goal precise: if the requirement is to style a particular word in the content, mark that word in the markup. If the requirement is instead about a visual line or layout position, it is a different problem and should be designed around the layout rather than treated as a last-word selector.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
