In IE, this :not(:nth-child():nth-last-child()) declaration isn't working-CodePudding

I have the following CSS.

.formhidden                     {overflow: hidden}

.formhidden[id*='petinfo_']
                                {height: 48px}
.formhidden[id*='petproblem_']
                                {height: 0px}

[id*='petinfo_']:not(.formhidden)
                                {outline: 1px solid black; padding: 24px 12px 12px}
[id*='petproblem_']:not(.formhidden)
                                {outline: 1px solid black; padding: 24px 12px 12px}
[id*='petinfo_']:not(.formhidden):not(nth-child(2))
                                {margin-top: -24px}
[id*='petproblem_']:not(.formhidden)
                                {margin-top: -24px}
[id*='petinfo_']:not(.formhidden)   div   [id*='petinfo_']
                                {margin-top: 24px}
[id*='petproblem_']:not(.formhidden)   [id*='petinfo_']
                                {margin-top: 24px}

/* For any pet div with the formhidden class, hide all,
but reveal the pet's name unless it's the only pet so far.
This is sensitive to position from first and last sibling. */
.formhidden[id*='petinfo_'] *:not(:nth-child(4)):not(:nth-child(5)),
.formhidden[id*='petinfo_']:nth-child(2):nth-last-child(4) *,
.formhidden[id*='petproblem_'] *,
#ownerform.formhidden,
.formhidden.form_btn            {visibility: hidden; height: 0px}

.formhidden[id*='petinfo_']:not(:nth-child(2):nth-last-child(4))
                                {outline: 1px solid black; margin-bottom: 24px}

Within a form, there are the following divs, separating sections of the form with the labels and inputs within these divs.

<div id="ownerform"></div>
<div id="petinfo_0"></div>
<div id="petproblem_0"></div>
<div id="html_element_recaptcha"></div>
<div class="buttonholder"></div>

To put it simply, the class ".formhidden" hides a section when it's applied. I have javascript applying and removing it from the sections so only one is visible at a time. The javascript also clones petinfo_0 and petproblem_0 and increments the 0 to the appropriate number.

It works great in Chrome and Firefox. But when I try it in IE (Edge), that last CSS declaration doesn't work.

.formhidden[id*='petinfo_']:not(:nth-child(2):nth-last-child(4))
                                {outline: 1px solid black; margin-bottom: 24px}

It's meant to exclude petinfo_0 if we haven't added any more sections yet. (In our initial state, it is the 2nd div from the front and 4th div from the end.)

I've been trying for hours to figure out what's wrong, but nothing works.

EDIT: In hindsight, I'm actually finding that none of the outlines are appearing, except for the one section that is being shown at the moment. So it would seem that none of those declarations with the outline in it, are working.

CodePudding user response：

As we can known from the doc, using two selectors at the same time is not yet supported in all browsers.

If you want to use them in IE, just replace it to :

.formhidden[id*='petinfo_']:not(:nth-child(2)):not(:nth-last-child(4)) {
                outline: 1px solid black;
                margin-bottom: 24px
            }

CodePudding user response：

In the end, it seems like I have to just override it if it IS nth-child(x):last-child(y). Additionally, IE does not support unset, so we have to explicitly override it with a value.

This worked out for me:

    .formhidden[id*='petinfo_']
                                    {outline: 1px solid black; margin-bottom: 24px}

    .formhidden[id*='petinfo_']:nth-child(2):nth-last-child(4)
                                    {outline: 0px; margin-bottom: 0px}