Add css style to single element in jQuery

Question

$(".className") return all the element having class .className , I want to add style only to a particular element i.e. I want to access element using their index number.

<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>

In this code how can I add red color to the first paragraph and yellow color to second paragraph

Nandita Sharma · Accepted Answer · 2018-06-08 05:10:15Z

3

When you do $(".para")[0], you get a dom element, not a jquery element. You need to convert it to jquery element again using $($(".para")[0]), then only you can change its style using jquery css method .

<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>

answered Jun 8, 2018 at 5:10

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaydp · Accepted Answer · 2018-06-08 05:12:44Z

3

You can use jQuery .eq() to get element and update anything for this element

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>

OR

You can use single statement as below

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

answered Jun 8, 2018 at 5:12

Jaydp

1,0499 silver badges17 bronze badges

Comments

Bhumi Shah · Accepted Answer · 2018-06-08 05:16:41Z

0

You can use like this

https://codepen.io/creativedev/pen/yEVgGg

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

$(".para:eq( 0 )").css('color', 'red');
$(".para:eq( 1 )").css('color', 'yellow');

edited Jun 8, 2018 at 5:16

answered Jun 8, 2018 at 5:09

Bhumi Shah

9,50210 gold badges69 silver badges110 bronze badges

Comments

brk · Accepted Answer · 2018-06-08 05:18:34Z

0

If there is no event which will trigger the changes, it can be done using only css pseudo selector like first-of-type & 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>

answered Jun 8, 2018 at 5:18

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Akhil Aravind · Accepted Answer · 2018-06-08 05:25:10Z

0

use addClass(), parameter used is the index and class name; Check the code snippet :D

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>

edited Jun 8, 2018 at 5:25

answered Jun 8, 2018 at 5:19

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Comments

amzad · Accepted Answer · 2018-06-08 06:12:49Z

0

 $(".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>

answered Jun 8, 2018 at 6:12

amzad

1

Collectives™ on Stack Overflow

Add css style to single element in jQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related