CODEWITHSUNDEEP
htmlcssinternet-explorer-8css-selectors
Chapsterj
Chapsterj

Reputation: 6625

How to get to last child

I have 3 <a> tags that I want to get to the last child in IE8. Unfortunately IE8 does not support :last-child. 

#breadcrumbs li:first-child div a {
  background: none !important;
  color: red !important;
}

The top css gets to the first <a> but I need to try and get to the 3rd one, I tried using the below code but it doesn't work.

#breadcrumbs li:first-child div a + li div a + li div a {
  background: none !important;
  color: red !important;
}


<ul id="breadcrumbs">
   <li><div><a>dfgdfg</a></div></li>
   <li><div><a>fdgdfgdf</a></div></li>
   <li><div><a>fdgdfgfd</a></div></li>
   <li><div><a>dgfdgdfg</a></div></li>
</ul>

Upvotes: 1

Views: 2051

Answers (3)

Axel
Axel

Reputation: 10772

ie9.js will bring IE8 and below up to the latest spec. Including this should allow the use of the pseudo selectors like :last-child

Just include it on your page like:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Upvotes: 1

S.Visser
S.Visser

Reputation: 4725

This is an nice hack to do this in combination with jQuery.

   /* Load this in your DOM */
   function last_child() {
      if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
        $('*:last-child').addClass('last-child');
      }
    }

Just put in your style 

li:last_child, li.last_child {

}

example: http://jsfiddle.net/2dcsH/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

I'm guessing, somewhat, but I'd suggest:

#breadcrumbs li + li + li + li div a {
    /* css here */
}

JS Fiddle demo.

You could, of course, simply apply a class-name to either the li or a element, and then style the element(s) based on that class-name. If JavaScript is available then you could, of course, use JavaScript to add the class where necessary:

var list = document.getElementById('breadcrumbs'),
    aElems = list.getElementsByTagName('a'),
    lastA = aElems[aElems.length - 1];
lastA.className = 'last';

JS Fiddle demo.

Upvotes: 2

Related Questions