CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Style first letter of each word in paragraph

I am trying to style the first letter of a paragraph using CSS and wanted to add some animation using greensock, But actually the requirement is to style the each word's first letter not just the first letter paragraph.

Whats the suggestion/ideas on this?

p{
  font-size:150%;
  color:#000000;
}
p::first-letter {
  font-size: 200%;
  color: #ff0000;
}
<p>Hello This Is The Title</p>

UPDATE I tried handling the following way (adding span tag and targeting first element of each span) but it doesn't work:

p span:nth-child(1)::first-letter {
   font-size: 200%;
   color: #ff0000;
}

Upvotes: 6

Views: 5159

Answers (4)

Sahil Dhir
Sahil Dhir

Reputation: 4250

There is no css first-word css selector. So you can use jquery to achieve this.

Solution 1: To style only 1st word of a paragraph .

$(function() {
    $('p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});
.firstWord{ color:red; font-size:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling the first word of pragraph.</p>

Solution 2 : Too style each first letter of paragraph line

$(document).ready(function() {
    var words = $('p').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('p').html(html);
});
.firstLetter{ color:red; font-size:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling each  first letter of the word in  pragraph.</p>

Upvotes: 2

prasanth
prasanth

Reputation: 22500

use with split(" ") for create the array form string and forEach() is iterate the each word. Then slice(0,1) the cut first letter of the word then append with span .And add the css effect with span 

var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
  $('p').append('&nbsp;<span>' + a.slice(0, 1) + '</span>' + a.slice(1))
})
p {
  font-size: 150%;
  color: #000000;
}

span {
  font-size: 200%;
  color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>

Upvotes: 11

Egor Stambakio
Egor Stambakio

Reputation: 18136

const p = document.getElementById('text')

const styleMe = l => '<span class="styled">' + l + '</span>'

const newS = p.innerText.split(' ').map(w => w.split('').map((l,i) => (i === 0) ? styleMe(l) : l).join('')).join(' ')

p.innerHTML = newS
.styled {
  color:red
}
<p id="text">Hello This Is The Title</p>

Upvotes: 4

Colin Schoen
Colin Schoen

Reputation: 2592

What you are looking for is a pseudo-element that doesn't exist. There is :first-letter and :first-line, but no :first-letter-every-word.

The easiest option would be to wrap the first letter of each word in a <span>. Another option would be to try a javascript solution.

Upvotes: 1

Related Questions