How Can I Style Only the First Word of Each Paragraph in CSS?

Achieving Precise Text Styling: Targeting the First Word in CSS

You seek to enhance the first word in each paragraph within the "#content" div, giving it a distinct font size of 14pt. Let's explore the possibilities of achieving this solely through CSS.

CSS Limitations

Unfortunately, CSS lacks a built-in pseudo-element specifically tailored to select the first word. Attempts to utilize ":first-letter" or ":first-line" for this purpose will not yield the desired result.

Alternative Approach: JavaScript

Despite the limitations of CSS, JavaScript can provide a solution. Consider utilizing a code snippet such as the one provided in the answer:

<script>
var elements = document.querySelectorAll("#content p");
for (var i = 0; i < elements.length; i++) {
var firstWord = elements[i].textContent.split(" ")[0];
elements[i].innerHTML = elements[i].innerHTML.replace(firstWord, "<span>

Implementation

1. Include this JavaScript code within your HTML document or link an external JavaScript file containing it.
2. Adjust the "#content" selector in the code to match your specific div's ID or class.

Conclusion

While CSS lacks direct support for styling the first word, JavaScript offers a viable alternative. By leveraging its capabilities, you can achieve precise text styling that encompasses the first word of each paragraph within your specified div.

The above is the detailed content of How Can I Style Only the First Word of Each Paragraph in CSS?. For more information, please follow other related articles on the PHP Chinese website!