CODEWITHSUNDEEP
csshtml-lists
kia4567
kia4567

Reputation: 603

Gettign the last <li> element to work the way I want it to

Iam needing help with my footer in CSS.

I'm a new wordpress developer and I get the gist of how to work with it but as usual I've run into a problem, it's probably simple too, as I'm not sure exactly how to pick out the certain CSS snippets I need. I use Firebug but sometimes I just not sure whats happening with my CSS I guess.

This is my testing site so you can have a look at what I'm going to be talking about. In my footer, my last < li > element (the Archives) I'm hoping to get up right underneath Follow Us. I can always us the last child css rule however I know IE ignores that. So whats my next option? I know what to do if wordpress has given the lists individual styles but in this case it hasn't, so I'm not sure what to do.

CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
.footer-widgets { width: 960px; margin: 0px auto; padding: 0px; /*border: 1px solid #fff;*/ }
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}

What is the best way to make this work? Any help is appreciated!

Upvotes: 0

Views: 115

Answers (2)

axcdnt
axcdnt

Reputation: 14584

There are 2 alternatives I see:

  1. Add a class to your last element and take it with JavaScript to do your own manipulation.

  2. Use jQuery to get the nested elements (unnecessary I think).

    Example:

    $('.yourElement').css('property', 'value')

Complement:

Getting any element with JavaScript:

  var x = document.getElementById("id");

I suggest you to take a look at this W3C documentation with an example. Right after you get the element with JavaScript comes manipulation anyway you need it.

I think it may help you!

Upvotes: 0

idrumgood
idrumgood

Reputation: 4924

If you need to support browsers that do not accept a :last-child selector then you have two options.

  1. Manually add a class to the last element and style it.

  2. Use javascript to find the last <li> and add a class, then style it.

[edit] Unfortunately, the very handy lastElementChild that was introduced in the W3C Traversal Spec is also not supported in IE8/7. That leaves you, again, with two options.

  1. Use a library like jQuery, which has very simple $('.footer-widgets li:last-child') selector
  2. Use regular js and find the element through tedious DOM traversal.

I would say it's silly to use jQuery for this one thing, but if you will be doing other javascript stuffs on your site, might as well use jQuery, right? Otherwise, I would stay away from the DOM traversal as it's just a pain. Just manually put a class on the last <li> and be done with it :)

Upvotes: 2

Related Questions