CSS Child selectors in IE8?

Yes, there is a way to emulate only with CSS and without javascript, which are requirements of the question, nth-child only with CSS. It gives a little more work, but it's workable.

Syntax of Adjacent sibling selectors, MDN Documentation :

  

former_element + target_element {style properties}

Syntax of : first-child, MDN Documentation :

  

element: first-child {style properties}

Equivalent nth-child with fist-child and sibling

/* Primeiro filho */
li:nth-child(1) {}
li:first-child {}

/* Segundo filho */
li:nth-child(2) {}
li:first-child + li {}

/* Terceiro filho filho */
li:nth-child(3) {}
li:first-child + li + li {}

How to do nth-child (odd), nth-child (3n + 2) and others?

In this case, it is a bit more laborious. To work with IE8 and even IE7 you will need to manually place all comma-separated equivalents up to a limit where you find it interesting nth-child would calculate to infinity, however in your CSS would have to be by a number up to where appropriate

li:nth-child(2n) {}
/* Equivalente até o oitavo valor */
li:first-child + li,
li:first-child + li + li +li,
li:first-child + li + li + li + li + li,
li:first-child + li + li + li + li + li + li + li {
}

Alternatives

Other solutions will necessarily involve javascript code or additional markup in your HTML. Unless it's really needed and nothing simple to solve, it's not interesting to add even more javascript to your page, especially if it's complex.

IE8 and especially IE7 can take a lot, but much longer to process the page when using polyfills to a point where it is unacceptable.

A page that rendered in 200ms in Chrome, when using polyfills for nth-child it was quiet for 7 seconds. At the time I solved just adding more classes in HTML

Today I needed to make a fix for IE8 in which I used the following selector to align 3 boxes horizontally.

In IE8 this code does not work, so I decided to do it with JQuery because I knew it would work.

That's when my doubt arose.

Is there another way to reproduce this same selector effect only with CSS and that works in IE8?

Below is the JQuery fix I used to solve the problem (just in case anyone needs it).

.

EDIT : I found a very good article explaining the functionality of CSS selectors. LINK HERE

Yes, there is a way to emulate only with CSS and without javascript, which are requirements of the question, nth-child only with CSS. It gives a little more work, but it's workable.

Syntax of Adjacent sibling selectors, MDN Documentation :

  

former_element + target_element {style properties}

Syntax of : first-child, MDN Documentation :

  

element: first-child {style properties}

Equivalent nth-child with fist-child and sibling

How to do nth-child (odd), nth-child (3n + 2) and others?

In this case, it is a bit more laborious. To work with IE8 and even IE7 you will need to manually place all comma-separated equivalents up to a limit where you find it interesting nth-child would calculate to infinity, however in your CSS would have to be by a number up to where appropriate

Alternatives

Other solutions will necessarily involve javascript code or additional markup in your HTML. Unless it's really needed and nothing simple to solve, it's not interesting to add even more javascript to your page, especially if it's complex.

IE8 and especially IE7 can take a lot, but much longer to process the page when using polyfills to a point where it is unacceptable.

A page that rendered in 200ms in Chrome, when using polyfills for nth-child it was quiet for 7 seconds. At the time I solved just adding more classes in HTML

As we can see this article from Microsoft < ie8 is not completely compatible with some of the properties of css3 :

  

Windows Internet Explorer 8 is fully compatible with   CSS specification, Level 2 Revision 1 (CSS 2.1), and supports   some CSS Level 3 (CSS 3) features.

Looking at the excerpt that comments on pseudo-classes here , we can see that no version of the ie equal to or less than ie8 is compatible with #:
:root , :nth-child() , :nth-last-child() , :nth-of-type() , :nth-last-of-type() , :last-child :first-of-type , :last-of-type , :only-child , :only-of-type , :empty , :target , :not(X) , :enabled , :disabled , :checked :indeterminate , :default , :valid , :invalid , :in-range , :out-of-range :required , :optional , :read-only , :read-write , %code% and %code%

In this way use javascript or any of your main frameworks becomes the best solution to deal with the situation without it being necessary to do changes to your html or css .

You can put classes in elements that will use this style:

You can use IE9.js .

Only include:

It is not a "lightweight" solution but there is a project that creates a Polyfill for IE8 to have more complete support for CSS3.

Selectivizr

As native, IE8 does not support most CSS3 pseudo-selectors in its querySelector as well as in CSS itself, it also fails when using anchor pseudo-selectors at a lower level, for example:

You can put classes in elements that will use this style:

#page-content .section-servicos .box-servico.ultima{ margin-right:0px; }

You can use IE9.js .

Only include:

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

It is not a "lightweight" solution but there is a project that creates a Polyfill for IE8 to have more complete support for CSS3.

Selectivizr

As native, IE8 does not support most CSS3 pseudo-selectors in its querySelector as well as in CSS itself, it also fails when using anchor pseudo-selectors at a lower level, for example:

a:hover div // Nunca será achado no IE8 mesmo que seu mouse esteja em cima da ancora que contenha uma div