Changing the position of a li element with a given class inside an ul ?

Question

Hello people,

I have a ul with several li elements, one of them will always have the class "active". How can I make the li.active element to always appear on top of the list?

I cant't control the html output that produces this list, so I would have to do this with css (preferably) or javascript/jquery. I guess there is not a way to do this with css, but it would be great to have some kind of position-in-list property.

Thanks a lot!

Answer 1

If we assume the height of the list items is going to be constant (and that is a pretty big assumption):

ul {
  position: relative;
  padding-top: 2em;
}

li {
  height: 2em;
}

li.active {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

If (and I think you do) you need to manipulate a list item's actual order, as you're guessing, CSS alone won't cut it. You're tagging this post with 'jquery' so I guess you know about that library's selectors and so on. Surely you just need to (a) select the li element with the class "active" and then (b) insert said item at the top of the unordered list? This is perfectly do-able in jQuery. Here's a (VERY) simple way of doing it:

    $('ul').prepend($('.active'));

All this does is grab the first element on the page with the class 'active' and prepends it to the first unordered list. This is probably too simplistic for your needs, but hopefully it will help you find a more robust solution.