First and Last Word Selector Using jQuery and CSS

First and Last Word Selector

In this tutorial, we create a program for the First and Last Word Selector using jquery and CSS.

I hope you will see on multiple websites, large font size on the first alphabet, if you not seen on website then you will be definitely seen on the magazines or newspaper, this post is similar to that.

therefore, in this program, I will use a small jquery function for styling first and last word selector of any paragraph. you can use this program, first and last word selector after a few changes.

therefore here I can use CSS Pseudo-elements, but that works on the first line and the first letter (info). so, in this program to create::first-word and the::last-word selector using CSS and jQuery.

As before I have already discussed that jquery is a JavaScript library, that the reason I used JS. there is a simple JavaScript library function used, you can understand very easy way.

which function based on jQuery. you don’t have to create the function, only you need to put the ID in the paragraph then just link the code. I hope you will understand the code segment after getting the code, if you want to use this program on your website, definitely you can use but after a few changes in the code.

Explanation of Source Code to create First and Last Word Selector Using jQuery and CSS

Let’s discuss, about the program which I will create first and last word selector, First I have created two div and I have placed the ids for both div. I have placed the two paragraphs content inside the div id.

the first Id to highlight the first word and second ID to highlight the last word. therefore, the first word and last word ID look like this <div id="Firstword"> and <div id="Lastword">

therefore, in the CSS file taken div width:700px; font-size:16px; text-align:justify; etc. and I have taken classes one class is .Firstword and second class .Lastword, puts all the properties inside the classes.

furthermore, jQuery detects the first word and last word using two separate functions. these are the whole concept which I have used for creating the first and last word selector with the help of CSS and JavaScript.

I hope you will enjoy this program, below I am sharing the code segment, when you getting the code you will understand more. for creating the program you have to create three files, first file for HTML, Second File for CSS & third file for JavaScript. Follow the process to create the program successfully.

First Step: Create HTML file as name “index.html” | change file name as you want

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>First word and Last Word Selector using JS</title>
  <link rel="stylesheet" href="css/stylesheet.css">
 
</head>
<body>
    <div id="Firstword">Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    </div>
    <div id="Lastword">randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet, you need to be sure there isn't anything embarrassing hidden Lorem Ipsum generators on the Internet
    </div>
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/functions.js"></script>
 
</body>
</html>

<head>

<title>First word and Last Word Selector using JS</title>

</head>

<body>

<div id="Firstword">Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

</div>

<div id="Lastword">randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet, you need to be sure there isn't anything embarrassing hidden Lorem Ipsum generators on the Internet

</div>

</body>

</html>

Second Step: Create CSS file as Name “stylesheet.css” | Change file name as you want

div {
  font-family:  sans-serif;
  width: 700px;
  text-align: justify;
  margin: 20px auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 33px;
}
.Firstword {
  color:green;
  font-weight: 900;  
  font-size: 30px;
}
.LastWord {
  color: blue;
  font-weight: 900;
  font-size: 30px;
}

div {

font-family: sans-serif;

width: 700px;

text-align: justify;

margin: 20px auto;

font-size: 16px;

font-weight: 500;

line-height: 33px;

}

.Firstword {

color:green;

font-weight: 900;

font-size: 30px;

}

.LastWord {

color: blue;

font-weight: 900;

font-size: 30px;

}

Third Step: Create Javascript function file as name “functions.js” | Change file name as you want

$.fn.lastWord = function() {
  var text = this.text().trim().split(" ");
  var last = text.pop();
  this.html(text.join(" ") + (text.length > 0 ? " <span class='Lastword'>" + last + "</span>" : last));
};
 
 
$.fn.firstWord = function() {
  var text = this.text().trim().split(" ");
  var first = text.shift();
  this.html((text.length > 0 ? "<span class='Firstword'>"+ first + "</span> " : first) + text.join(" "));
};
 
$("#Firstword").firstWord();
$("#Lastword").lastWord();

$.fn.lastWord = function() {

var text = this.text().trim().split(" ");

var last = text.pop();

this.html(text.join(" ") + (text.length > 0 ? " <span class='Lastword'>" + last + "</span>" : last));

};

$.fn.firstWord = function() {

var text = this.text().trim().split(" ");

var first = text.shift();

this.html((text.length > 0 ? "<span class='Firstword'>"+ first + "</span> " : first) + text.join(" "));

};

$("#Firstword").firstWord();

$("#Lastword").lastWord();

Therefore, see the code segment to create the First and Last Word Selector Using jQuery and CSS. you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.

First and Last Word Selector Using jQuery and CSS

Explanation of Source Code to create First and Last Word Selector Using jQuery and CSS

First Step: Create HTML file as name “index.html” | change file name as you want

Second Step: Create CSS file as Name “stylesheet.css” | Change file name as you want

Third Step: Create Javascript function file as name “functions.js” | Change file name as you want

Related Posts

About Author

admin