How to add different css for same class using css or javascript?(Edited)

Question

Edited:Q1 is solved if possible then reply for Q2.

Q1)for example i have some html like that

<div class="toggle-menu-wrap">
    <div class="toggle-menu-wrap">
        <ul id="menu-main-menu" class="main-menu sidebar-menu subeffect-fadein-left">
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <ul class="sub-menu gotosubmenu">
                        <li class="menu-item"><a href="">Main Demo</a></li>
                        <li class="menu-item"><a href="">Construction</a></li>
                        <li class="menu-item"><a href="">Hotel</a></li>
                    </ul>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

and i want to add css style for class gotomenutop with different top value.. like given below

.gotomenutop {
    top: 0px;
}
.gotomenutop {
    top: -42px;
}
.gotomenutop {
    top: -84px;
}
.gotomenutop {
    top: -126px;
}

you can clearly see that different between top value is 42 for .gotomenutop . how can i achieve this ?? and Q2)

first gotosubmenu first li have "top" value:-5px

first gotosubmenu second li have "top" value:-40px

first gotosubmenu third li have "top" value:-75px

first gotosubmenu fourth li have "top" value:-110px and and same thing repeat for second gotosubmenu first li how can i achieve this and this all thing generate dynamically..

JQuery and javascript any would be ok...for me..

Answer 1

Use :nth-chlid() pseudo-class selector.

li:nth-child(1) > .gotomenutop {
  top: 0px;
}
li:nth-child(2) > .gotomenutop {
  top: -42px;
}
li:nth-child(3) > .gotomenutop {
  top: -84px;
}
li:nth-child(4) > .gotomenutop {
  top: -126px;
}

Note: Which is limited to a certain number of elements.

---

UPDATE: If there are a random number of elements then it would be better to go for jQuery. Use jQuery css() method with a callback, within the callback first argument holds index and generates the property value based on the index.

$('.gotomenutop').css('top', function(i) {
  // generate the value
  return i * -42;
}) 

---

Or with pure Javascript by getting and iterating over the elements.

// get all elements and convert into array
// for older browser use - [].slice.call()
Array.from(document.querySelectorAll('.gotomenutop'))
  // iterate over the elements
  .forEach(function(ele, index) {
    // apply the style property
    ele.style.top = index * -42;
  })    

Answer 2

If you want to use jquery, use .css() with callback. In callback function set value of top relevant to index of element.

$(".gotomenutop").css("top", function(i){
    return i * -42;
});

---

Update: For second question, you should loop through .gotosubmenu using .each() and in loop, iterate every li tag and add css to it using above code.

$(".gotosubmenu").each(function(){
  $(this).find("li").css("top", function(i){
    return (i * -35) - 5;
  });
});

Answer 3

I would recommend @Pranav answer, However here is jQuery option of using $.fn.css(propertyName, fn) method

$('.gotomenutop').css('top', function(index, x) {
  return -index * 42;
}) 

 $('.gotomenutop').css('top', function(index, x) { return -index * 42; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-menu-wrap"> <div class="toggle-menu-wrap"> <ul id="menu-main-menu" class="main-menu sidebar-menu subeffect-fadein-left"> <li class="menu-item narrow"> <div class="popup gotomenutop">1</div> </li> <li class="menu-item narrow"> <div class="popup gotomenutop">2</div> </li> <li class="menu-item narrow"> <div class="popup gotomenutop">3</div> </li> <li class="menu-item narrow"> <div class="popup gotomenutop">4</div> </li> </ul> </div> </div>