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

So, essentially, the margin is doubled for each li, right? Will there be a fixed/maximum number of lis that you know upfront, or does it have to be dynamic? — Sarah Groß
– Sarah Groß, Commented Feb 13, 2017 at 11:06
@Connum the lis is dynamically generated its dont have fixed count.. — amresh singh
– amresh singh, Commented Feb 13, 2017 at 11:08
Ok, then you'll either have to define as many CSS rules as you think will ever be needed, or use the jQuery approach! — Sarah Groß
– Sarah Groß, Commented Feb 13, 2017 at 11:11
You have accepted answer and now edited the question this renders answer meaningless. Better post a new question — Satpal
– Satpal, Commented Feb 13, 2017 at 14:12
@Satpal i know that...and i told you below but you not answered so i have to edit it...and if you have answer then give it otherwise leave it...ok — amresh singh
– amresh singh, Commented Feb 13, 2017 at 15:08

Pranav C Balan · Accepted Answer · 2017-02-13 11:31:42Z

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

Mohammad · Accepted Answer · 2017-02-13 17:56:33Z

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

edited Feb 13, 2017 at 17:56

answered Feb 13, 2017 at 11:08

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

3 Comments

amresh singh Over a year ago

i cant get it can you please explain it in depth..pls

Mohammad Over a year ago

@amreshsingh The code loop through .gotomenutop elements and add css for every of them. The i variable in function is index of element that start with 0. To better understanding see jsfiddle.net/3tc6pk68

amresh singh Over a year ago

hay @Mohammad can you please Question i just edited it and can you please help with second part of ..pls..

Satpal · Accepted Answer · 2017-02-13 11:08:15Z

1

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>

answered Feb 13, 2017 at 11:08

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

amresh singh Over a year ago

hay @Satpal is any way to reset index and caculation to start again after it leaves first gotomenutop class..

amresh singh Over a year ago

hay can you please help me with that because i have another set of <li> tag in gotomenutop <div> which have structure like <li class="menu-item menu-item-has-children sub" data-cols="1"> <ul class="sub-menu gotosubmenu"> <li class="menu-item"><a href="">Classic - Color</a></li> <li class="menu-item"><a href="">Classic - Color</a></li> </ul> </li> and i want do it same thing for each gotosubmenu but whenever it leaves first gotosubmenu then again start calculation from ZERO....

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related