How we can give different style for the first word of a paragraph using JavaScript and CSS? Solution: First and Last Word Selector Using jQuery and CSS, :first-word :last-word.
Maybe you have noticed some times that some magazines and newspaper has a large font size on the first alphabet. This post is something similar to that, but it’s for customize first word, not alphabets. There is a small jquery function for styling first or the last word of any paragraph.
Today you will learn to create ::first-word and the ::last-word selector using jQuery. As you know jquery is a JavaScript library, that’s why I am putting this in JS category. There is a very small and lightweight code, you can also use this as a plugin. We also can use CSS Pseudo-elements, but that works only on the first letter and first line (info).
So, Today I am sharing the First and Last Word Selector Using jQuery and CSS. I have used very fewer lines of JS code which is based on jQuery. You don’t have to create the function, you just have put the ID in the paragraph then just link the code. Maybe we can do this using pure JS but jQuery saves time.
If you are thinking now how this selector actually is, then see the preview given below.
Preview Of :first-word :last-word Select
See this video preview to getting an idea of how this looks like.
Live Demo
Now you can see this visually, you can also see this live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- CSS Ghost Buttons With Icons
- Active Tab Slider Animation
- JavaScript Table Filter or Search
- Loading Screen Animation
First and Last Word Selector Using jQuery and CSS Source Code
Before sharing source code, let’s talk about it. First I have created 2 divs, one for highlight first word and one for last. I have just placed two id’s firstWord and lastWord, now its look like this: <div id="firstWord"> and <div id="lastWord"> .
Now in the CSS file, I gave values in two classes but I have not placed the class in HTML elements. Now jQuery detects the first and last word using two separate functions. After detecting the words JQuery push the CSS class into the words. That’s is the whole concept.
For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>First word and Last Word Selector | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="firstWord">Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. </div> <div id="lastWord">Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ @import url(https://fonts.googleapis.com/css?family=Open+Sans); div { font-family: 'Open Sans', sans-serif; width: 400px; text-align: justify; margin: 20px auto; font-size: 1rem; } .firstWord { color: red; font-weight: 900; font-size: 1.5rem; } .lastWord { color:#fd9d08; font-weight: 900; font-size: 1.5rem; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Code By Webdevtrick ( https://webdevtrick.com ) $.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(); |
That’s It. You have successfully created First and Last Word Selector Using jQuery and CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Does not work in Chrome in Android?
it works, there is an error because of HTTPS protocol. Open live demo page and remove “s” from https left as https://webdevtrick.com/demos/first-and-last-word-selector/
Change your demo link then. Nobody will waste time on the site if your links are wrong even
demo link is with the only HTTP but there is a redirection for https