Style First Character Of A Paragraph Using Jquery

i'm looking for a way to style the first character in a paragraph. I've used this function to return the first character var x= $('.about p:eq(0)').text(); alert(x.charAt(0)); but

Solution 1:

You can use CSS3 to style your first character.

p::first-letter { 
  font-size: 200%;
  color: #8A2BE2;
}

Demo: http://jsfiddle.net/vhyqowde/

More Info: http://www.w3schools.com/cssref/sel_firstletter.asp

---

Javascript approach:

$(document).ready(function () { 
    var elem = $("p").contents().filter(function () { returnthis.nodeType == 3 }).first(),
        text = elem.text().trim(),
        first = text.slice(0, 1);

    if (!elem.length)
        return;

    elem[0].nodeValue = text.slice(first.length);
    elem.before('<span>' + first + '</span>');
});

http://jsfiddle.net/kynt4pot/

Solution 2:

Use CSS first-letter selector

p::first-letter {
    color: #FF69B4;
}

This will select and style the first letter of every <p> element. JS Fiddle Demo

Solution 3:

With Jquery : http://jsfiddle.net/2wkjyz4g/2/

var x= $(".about p:eq(0)").text();
var text='<span class="fChar">'+x.charAt(0)+'</span>';
$(".about p:eq(0)").html(text + x.slice(1,x.length));

With css : http://jsfiddle.net/pe5Loaqn/

.aboutp:first-child:first-letter {
    color:red;
}

because you asked for jquery solution and you selected 1st(:eq(0)) <p> tag.

update after @Garconis' comment

var parent = "p"functionstyleFirst(elem){
	var content = $(elem).contents()[0];
  if(content.nodeType == 1){
  	 styleFirst(content);
  }elseif(content.nodeType == 3){
     $(elem).html(style(String(content.nodeValue)));
  }
}

functionstyle(txt){
    var newTxt = '<span class="fChar">' + txt.charAt(0) + '</span>';
		return newTxt + txt.slice(1, txt.length);
}
styleFirst(parent);

.fChar {
    color:red;
}

span{
  color: blue;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><p><span><span>Win</span>ter</span> is <span>here</span> !!!!!!!!!!!</p>

Update in code:

Can retain the nodes in the para tag also can style 1st text character even if it is nested in any other element.

The code can be updated to check if 1st char is space/tab etc in style() method and subsequent styling can be applied.

Solution 4:

After having the same initial question, I decided to take bits and pieces of other's code, and create my own solution/answer. Here is my method.

Demo: http://jsfiddle.net/Garconis/g72a4h03/

Reference notes in the jQuery to understand some of the reasoning.

(function($) {

  // find each instance of your target
  $('p').each(function() {

    // now check if the first character is "<" character// if is NOT a "<" character, then continueif ($(this).html()[0] != "<") {
      // good, now search the contents of the first TEXT_NODE within the selectorvar node = $(this).contents().filter(function() {
          returnthis.nodeType == 3
        }).first(),
        // check the start of the string (which is what the ^ is for)// find any white space (via the "\s")// and chunks of contiguous whitespace, which is what the + is for on "\s+"// and keep finding all instances at the start, which is what the global "/g" is for// and convert them into nothing
        text = node.text().replace(/^\s+/g, ''),
        // now start at the beginning (0 position) and grab the first character
        first = text.slice(0, 1);

      // if the first node isn't a TEXT_NODE, then stop hereif (!node.length)
        return;

      // remove the text character that we grabbed
      node[0].nodeValue = text.slice(first.length);
      // now add it back, before the node we checked, with a wrapper
      node.before('<span class="fs-dropcap">' + first + '</span>');

    };

  });

})(jQuery);

span.fs-dropcap {
  color: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><hr><p>&nbsp;"[yo]"This is a test <b>&nbsp; Other HTML <ahref="#0;">tester</a> should not be affected by manipulations</b></p><hr><p>    This is a test <b>&nbsp; Other HTML <ahref="#0;">tester</a> should not be affected by manipulations</b></p><hr><p><span>span tag here</span> This is a test <b>&nbsp; Other HTML <ahref="#0;">tester</a> should not be affected by manipulations</b></p><hr><p><ahref="#0">test</a> This is a test <b>Other HTML should not be affected by manipulations</b></p><hr><p>This is a test <b>Other HTML should not be affected by manipulations</b></p><hr><p>&nbsp; This is a test "Other HTML should not be affected by manipulations"
</p><hr><p><u>&nbsp;&nbsp;tester&nbsp;&nbsp;</u> This is a test "Other HTML should not be affected by manipulations"
</p>