Getting Last-Child of a Div in IE8

Getting last-child of a div in IE8?

In jQuery it's easy:

$("div :last-child")

In pure CSS it can't be done.

Otherwise you're stuck with traversing the DOM in Javascript.

Also note the difference:

• "div :last-child": every last child of a div; and
• "div:last-child": every div that is a last child.

How to use :nth-last-child in IE8?

CSS-only solution not possible, you are dealing with browsers that are way too old. On the upside, you don't need your own script as Selectivzr does just this, or alternatively the all-in-one solution that is IE9.js (fixes a ton of other IE bugs, not just add new selectors).

IE8 :nth-child and :before

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}​

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

:last-child does not work in IE8

use :first-child - http://caniuse.com/#feat=css-sel2

.table{    border-spacing: 0;    border:2px solid #e5e5e5;    border-collapse: collapse;}tr th{}th{    padding:30px;    background:#e5e5e5;    border-left: 2px solid #fff;}th:first-child{    border-left: none;}td {        border-right: 2px solid #e5e5e5!important;    border-top: 1px solid #e5e5e5!important;    padding: 30px;    background:#fff}

<table class="table">    <tr>        <th>Header 1</th>        <th>Header 2</th>        <th>Header 3</th>    </tr>    <tr>        <td>Content 1</td>        <td>Content 2</td>        <td>Content 3</td>    </tr>    <tr>        <td>Yes</td>        <td>Yes</td>        <td>No</td>    </tr></table>

Selecting the last child elements of a div without looping

I think you need :not with :last-child:

$('.ganttview-block-container')
  .addClass('Opacity')
  .filter(':not(:last-child)')
    .addClass('Absolute');

:last-child pseudo class selector in CSS and Internet Explorer

So, after some digging around, I found the answer:

If the browser is IE<8, specify a stylesheet like this:

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

And within your IE stylesheet specify the following rules:

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

The nextSibling expression looks to see if there is an element after it and if there is inherits the rule specified in the default stylesheet, if not it applys a new rule.

More information can be found here

How to make Internet Explorer 8 to support nth child() CSS element?

You can use http://selectivizr.com/ JS which support css3 selector for IE.

How to handle nth-child for internet explorer 8

As Andy mentioned in the comments you can find out to which elements you have to add a class with PHP. All you need is a modulo division.

A pure CSS-Solution requires you to improve your HTML. It is obviously a list of images, therefore: Use a list. The resulting HTML should look something like this:

<ul class="gallery_container">
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    […]
</ul>

In the CSS now remove your :nth-child rule and instead add the following two rules:

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}

---

Related Topics