CODEWITHSUNDEEP
javascripthtmlcss
somejkuser
somejkuser

Reputation: 9040

only apply css style to first available class element within div using javascript

I have the following html:

<div class="comment">
  <div class="text">
     <p class="para">test</p>
     <p class="para">test2</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test3</p>
     <p class="para">test4</p>
     <p class="para">test5</p>
     <p class="para">test6</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test7</p>
     <p class="para">test8</p>
  </div>
</div>

And then at the bottom of the page is some javascript:

<script>
 var x = document.getElementsByClassName("para");
 var i;
 for(i=0;i<x.length;i++){
   x[i].style.marginTop="120px";
 }
 </script>

The javascript loops through all of the para class elements and applies a 120px margin top.

The problem is i only want the first para within each text div to have a 120px margin top.

So, the solution should have the first para element within each text div to have a margin top , which would include test,test3,test7

Upvotes: 0

Views: 54

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14561

If you're open to using CSS, you could use .text > .para:first-child to set the margin-top. It is certainly more efficient than using Javascript.

.text > .para:first-child {
  margin-top: 120px;
}
<div class="comment">
  <div class="text">
     <p class="para">test</p>
     <p class="para">test2</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test3</p>
     <p class="para">test4</p>
     <p class="para">test5</p>
     <p class="para">test6</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test7</p>
     <p class="para">test8</p>
  </div>
</div>

You could also use the same selector with document.querySelectorAll to get the matching elements, and set the margin-top on them if you want.

var elems = document.querySelectorAll('.text > .para:first-child');

elems.forEach(function(elem) {
  elem.style["margin-top"] = "120px";
});
<div class="comment">
  <div class="text">
    <p class="para">test</p>
    <p class="para">test2</p>
  </div>
</div>
<div class="comment">
  <div class="text">
    <p class="para">test3</p>
    <p class="para">test4</p>
    <p class="para">test5</p>
    <p class="para">test6</p>
  </div>
</div>
<div class="comment">
  <div class="text">
    <p class="para">test7</p>
    <p class="para">test8</p>
  </div>
</div>

Upvotes: 3

Related Questions