First and Last Word Selector Using jQuery and CSS | :first-word :last-word

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.

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.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

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.