CSS Child selectors on IE8?

Question

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

#page-content .section-servicos .box-servico:nth-child(3n+2){ margin-right:0px; }

in IE8 this code does not work, so I decided to do with Jquery because I knew that would work.

It was then that my doubt arose.

There is another way to play this same CSS selector effect that works on IE8?

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

$('.box-servico:nth-child(3n+2)').css('margin-right', '0px');

.

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

Answer 1

Yes, there is a way to emulate only with CSS and without javascript, points that are question requirements, Nth-Child only with CSS. It’s a little more work, but it’s viable.

Syntax of Adjacent sibling selectors, MDN Documentation:

former_element + target_element { style properties }

Syntax of :first-Child, MDN Documentation:

element:first-Child { style properties }

Nth-Child equivalent 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’s a little more work. To work with IE8 and up to IE7 you will manually need all the comma-separated equivalents up to a limit where you find interesting Nth-Child would calculate to infinity, but in your CSS you would have to put a number as far as you think pertinent

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 necessary and nothing simple to solve, it’s not interesting to add even more javascript to your page, especially if it’s complex.

IE8 and in particular IE7 may take a long time, 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 came smoothly to 7 seconds. At the time I solved just adding more classes in HTML

Answer 2

As we can see in this article of Microsoft the ie8 is not fully compatible with some properties of css3:

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

Observing the excerpt that comments on the pseudo-classes here, we can realize that no version of ie equal to or less than ie8 is compatible with the pseudo-classes:
: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 and :read-write

In this way use javascript or one of his main frameworks becomes the best solution to treat the situation without having to make changes to its html or css.

Answer 3

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

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

Answer 4

You can use the IE9.js.

Only include:

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

Answer 5

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

Selectivize

By native IE8 does not support both its "querySelector" and the CSS itself most CSS3 pseudo-selectors, 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