First-Child and Last-Child with IE8

first-child and last-child with IE8

If your table is only 2 columns across, you can easily reach the second td with the adjacent sibling selector, which IE8 does support along with :first-child:

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Otherwise, you'll have to use a JS selector library like jQuery, or manually add a class to the last td, as suggested by James Allardice.

Make first-child and last-child work in IE8

I ended up doing the following as I have fixed columns

thead>tr:first-child>th:first-child+th+th+th {
    color: red;
}
tbody>tr:first-child>td:first-child+td+td+td {
    color: red;
}

I did the above as first-child supports IE8 but not last-child.

It is working properly in IE8.

Source

Anyway, I still don't know how to use selectivizr in project.

css ie8 first-child & last-child

You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.

IE8 does not support :last-child. (It does support :first-child though)
You can see the browser support for these (and all other CSS selectors) at Quirksmode.org.
The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.
If you really need to use selectors like :last-child, and you really need to support IE8, there are Javascript solutions you could try:
- http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.
- https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.
Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.
However as I said, IE8 does support :first-child, so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.
For this, the only solution available is a JS library called CSS3Pie. This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).

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.

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

Does ie support first-child and last-child?

From http://www.quirksmode.org/css/contents.html :

first-child: IE6: No. IE7/8: Yes with caveats. IE9+: yes.

last-child: IE6/7/8: No. IE9+: Yes.

jQuery supports them everywhere.

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.

Browser support for CSS :first-child and :last-child

:first-child and :last-child, along with complimentary compatibility chart.

:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).

:last-child is supported by IE9+ only.

Both of them are supported well by the good browsers.

nth-child doesn't work in IE7/IE8

That's because :nth-child isn't supported in IE7/IE8.

One solution to this problem would be to use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8."

All you need to do is include the Selectivizr script and, if you aren't already using one, decide which JavaScript library you'd like to use (jQuery, Mootools etc.) and you will have support for the :nth-child selector (amongst various other pseudo-selectors/attribute selectors) in IE6 through to IE8.

Edit:

In reply to your comment, here's a quick tutorial showing you how to set up and use Selectivizr.

First-Child and Last-Child with IE8