CODEWITHSUNDEEP
javascriptjquerycssjquery-uistyling
Ankit Halder
Ankit Halder

Reputation: 169

Add css style to single element in jQuery

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

Upvotes: 3

Views: 4342

Answers (6)

amzad
amzad

Reputation: 1

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

Upvotes: 0

Akhil Aravind
Akhil Aravind

Reputation: 6130

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>

Upvotes: 0

brk
brk

Reputation: 50291

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>

Upvotes: 0

Bhumi Shah
Bhumi Shah

Reputation: 9476

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');

Upvotes: 0

Jaydp
Jaydp

Reputation: 1039

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"});

Upvotes: 3

Nandita Sharma
Nandita Sharma

Reputation: 13407

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>

Upvotes: 3

Related Questions