CODEWITHSUNDEEP
csscss-selectorsparagraph
Shakil Ahmad
Shakil Ahmad

Reputation: 161

Target first letter of each word in css

I need to change size, color, and weight of every first letter of each word. I am not talking about Capitalize each first letter. I mean that target first letter and apply style according to my choice.

enter image description here

Upvotes: 9

Views: 16516

Answers (3)

Filipe Esperandio
Filipe Esperandio

Reputation: 506

Wasn't happy with the responses here, then found an answer someplace else pointing to this CSS selector:

font-variant: small-caps;

Source: https://www.sitepoint.com/community/t/css-target-the-first-letter-of-every-word/8108

Upvotes: -2

sinan
sinan

Reputation: 21

To dynamically apply styling to the first letter of each words within elements, you can leverage JavaScript and CSS.

You can achieve the effect of wrapping the first letter of each word with a <span> element using JavaScript. This approach allows you to automatically apply the style to specific elements without hard-coding it directly in your HTML. Which could be useful if you are working with some sort of dynamic data. For example:

window.onload = function () {
    // Select elements with the class "each-word"
    var elements = document.querySelectorAll(".each-word");

    for (var i = 0; i < elements.length; i++) {
        var htmlContent = elements[i].innerHTML;
        var modifiedContent = htmlContent.replace(
            /(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim,
            function (match, p1, p2) {
                if (p1) {
                    return "<span class='first-letter'>" + p1 + "</span>" + (p2 || "");
                } else {
                    return match; // Preserve HTML tags
                }
            }
        );
        elements[i].innerHTML = modifiedContent;
    }
};
.first-letter {
  color: red;
  font-size: 50px;
  /* Customize other styles as needed, KYSO */
}
<h2 class="each-word">Lorem ipsum dolor</h2>
<h3 class="each-word">Lorem ipsum dolor sit <br>amet consectetur</h3>

The regular expression /(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim is used for text replacement. It selectively matches and replaces the text content while preserving HTML tags using the (?:<[^>]*>) non-capturing group. Like the <br> preserved inside within the <h3> in above example.

If you need to target a nested child element's first letters of every words, you can do so by using the child selector method in the querySelectorAll function. For example:

window.onload = function () {
    // To target specific child elements within "each-word"
    var elements = document.querySelectorAll(".each-word > div > h3");

    for (var i = 0; i < elements.length; i++) {
        var htmlContent = elements[i].innerHTML;
        var modifiedContent = htmlContent.replace(
            /(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim,
            function (match, p1, p2) {
                if (p1) {
                    return "<span class='first-letter'>" + p1 + "</span>" + (p2 || "");
                } else {
                    return match; // Preserve HTML tags
                }
            }
        );
        elements[i].innerHTML = modifiedContent;
    }
};
.first-letter {
  color: red;
  font-size: 50px;
  /* Customize other styles as needed, KYSO */
}
<div class="elementor-element each-word">
    <div class="elementor-widget-container">
        <h3>Lorem consectetur adipisicing elit. <br>Eligendi dolorem ecessitatibus.</h3>
    </div>
</div>

The querySelectorAll function can be used to select specific child elements based on their nesting within the structure like var elements = document.querySelectorAll(".each-word > div > h3");

Upvotes: 2

Kapilraj Parameswararajah
Kapilraj Parameswararajah

Reputation: 372

You should wrap every single word with a tag and use ::first-letter CSS selector .

Also, note that this selector does not work on inline elements. If you want to use it with an inline element, such a <span>, make sure you set display:inline-block (see here for more details: https://stackoverflow.com/a/7631782/11298742)

example :

p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
    color: red;
    font-weight: bold;
}
<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>

Upvotes: 15

Related Questions