CODEWITHSUNDEEP
csscss-selectorsinternet-explorer-10
Corey Ogburn
Corey Ogburn

Reputation: 24717

IE10 ignoring first-child in css and applying to all?

What I'm trying to do is remove the drop down arrow from a select with this CSS:

.Gender:first-child::-ms-expand {
    display: none;
}

The select element is disabled and its content is set programmatically. It is still a select because of our "unique" roll-your-own binding approach that would be a huge overhaul to replace/update.

Basically I have a section to input basic information for a dynamic number of people. The first instance is always the Primary instance and it's data comes from another section of the page so it's disabled here and bound to the values in that other form. Every other entry after it is editable. The idea was to remove the drop down arrow from the first selects because they're read only. I know that even though the drop down arrow is missing that the select continues to work but I still want it to be there for every other select that isn't disabled.

I know it works in a simplified JSFiddle but in my site ALL selects that have those classes are hiding their drop down arrow. What can I look for in my site that would circumvent the :first-child pseudo class? Why could it possibly work in the fiddle but not in the actual site?

Everything I'm reading says to check your doctype. Mine is <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en">. Nobody that I found ever explicitly says the exact doctype to use, so this may not be 100% correct.

Also, this only needs to work in IE10, it's an internal web app that'll never be run anywhere else.

Upvotes: 0

Views: 761

Answers (1)

BoltClock
BoltClock

Reputation: 723508

The single most common cause of every instance of a specific element matching :first-child, when only the first of them should match, is if each of those elements actually exists in its own container element. Here's an example:

<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>
<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>
<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>

Here, every .Gender is the first — and only — child of its parent element, .parent. The .parent elements themselves, on the other hand, are siblings of one another, sharing the same parent element (not shown). Depending on what your source looks like, it may be difficult to pinpoint the location of these parent elements within the source, but as long as your markup is valid, they should be somewhere.

If it does turn out to be the problem, fixing it is trivial — just move the :first-child pseudo-class to the appropriate element:

.parent:first-child .Gender::-ms-expand {
    display: none;
}

Updated fiddle

Upvotes: 1

Related Questions