How to apply CSS styling to a specific element using jQuery

Question

How to apply CSS styling to a specific element using jQuery

When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element?

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
    <p class="para">first paragraph </p>
    <p class="para">Second paragraph </p>
    <p class="para">Third paragraph </p>
    <script>
        console.log($(".para"));
        // console.log($(".para")[0].css({"color":"red"}));
 </script>
</body>
</html>

Is there a way in this code to set the color of the first paragraph to red and the second paragraph to yellow?

javascript jquery css jquery-ui styling

Answer 1

Answer №1

After selecting the element with $(".para")[0], keep in mind that you will receive a DOM element, not a jQuery element. To manipulate its style using jQuery's css method, you must first convert it back to a jQuery element by wrapping it as $($(".para")[0]).

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
<script>
   
    $($(".para")[0]).css({"color":"red"});
    $($(".para")[1]).css({"color":"yellow"});
 </script>
</body>
</html>

Answer 2

After selecting the element with $(".para")[0], keep in mind that you will receive a DOM element, not a jQuery element. To manipulate its style using jQuery's css method, you must first convert it back to a jQuery element by wrapping it as $($(".para")[0]).

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
<script>
   
    $($(".para")[0]).css({"color":"red"});
    $($(".para")[1]).css({"color":"yellow"});
 </script>
</body>
</html>

Answer 3

Answer №2

Utilize the power of jQuery .eq() method to target specific elements and manipulate their properties.

https://api.jquery.com/eq/

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
<script>       
   $(".para").eq(0).css({"color":"red"});
    $(".para").eq(1).css({"color":"yellow"});
    
 </script>
</body>
</html>

Alternatively, you can achieve the same effect with a single command:

$(".para").eq(0).css({"color":"red"}).end().eq(1).css({"color":"yellow"});

Answer 4

Utilize the power of jQuery .eq() method to target specific elements and manipulate their properties.

https://api.jquery.com/eq/

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
<script>       
   $(".para").eq(0).css({"color":"red"});
    $(".para").eq(1).css({"color":"yellow"});
    
 </script>
</body>
</html>

Alternatively, you can achieve the same effect with a single command:

$(".para").eq(0).css({"color":"red"}).end().eq(1).css({"color":"yellow"});

Answer 5

Answer №3

Here is an example of how it can be done:

https://example.com/codepen-link

<p id="first-para">First paragraph </p>
<p id="second-para">Second paragraph </p>
<p id="third-para">Third paragraph </p>

$("#first-para").css('color', 'blue');
$("#second-para").css('color', 'green');

Answer 6

Here is an example of how it can be done:

https://example.com/codepen-link

<p id="first-para">First paragraph </p>
<p id="second-para">Second paragraph </p>
<p id="third-para">Third paragraph </p>

$("#first-para").css('color', 'blue');
$("#second-para").css('color', 'green');

Answer 7

Answer №4

To implement changes without an event trigger, you can utilize CSS pseudo-selectors such as first-of-type and nth-child(childIndex)

.para:first-of-type {
  color: red;
}

.para:nth-child(2) {
  color: yellow;
}
.para:nth-child(3) {
  color: green;
}

<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

Answer 8

To implement changes without an event trigger, you can utilize CSS pseudo-selectors such as first-of-type and nth-child(childIndex)

.para:first-of-type {
  color: red;
}

.para:nth-child(2) {
  color: yellow;
}
.para:nth-child(3) {
  color: green;
}

<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

Answer 9

Answer №5

Implement the addClass() function by passing in the index and class name as parameters. Take a look at the code snippet below:

function addClass(index, classname){
  var el = jQuery('.para');
  el[index].classList.add(classname);
  console.log(el[index]);
}
addClass(1, 'active');

.active{
  color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

Answer 10

Implement the addClass() function by passing in the index and class name as parameters. Take a look at the code snippet below:

function addClass(index, classname){
  var el = jQuery('.para');
  el[index].classList.add(classname);
  console.log(el[index]);
}
addClass(1, 'active');

.active{
  color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

Answer 11

Answer №6

 $(".para").eq(0).css({"color":"yellow"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="para">first paragraph </p>`enter code here`
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

Answer 12

 $(".para").eq(0).css({"color":"yellow"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="para">first paragraph </p>`enter code here`
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

How to apply CSS styling to a specific element using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Implementing a JavaScript validator for an ASP textbox

Is there a way to assign the chosen option from a dropdown list to an input field in Vue 3?

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Using jQuery to loop through a collection

Can we find a method to incorporate multicolored borders?

Update the image and heading simultaneously when hovering over the parent div

Using the .slider class on concealed div elements

Top recommendation for utilizing $scope variables in Angular applications

The attempt to showcase items in a div element using inline display did not produce

Should I opt for using plain JavaScript or jQuery when making an AJAX request to fetch JSON data?

Despite importing jQuery, the variable '$' cannot be located

Using React in ES5 to create a button that triggers two separate functions with a

What is the best method to modify and access imported .css files within the WordPress style.css file?

Displaying errors above the table. Executing ng-repeat in AngularJS

Restricting slash commands in Discord.js to a specific permission level

What is the process for including a JavaScript file in an HTML document?

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

Transfer the index of a for loop to another function

The alert box in Javascript appears before the execution of the statement preceding it