0

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Corey Ogburn
  • 24,072
  • 31
  • 113
  • 188
  • You cannot use `'nth` on a class...only elements. Oh, and you can't apply two pseudo classes as the same time (AFAIK). – Paulie_D Feb 18 '14 at 15:48
  • 1
    @Paulie_D don't think that's accurate, as you can see in this fiddle: http://jsfiddle.net/XtvLW/. – dlane Feb 18 '14 at 15:51
  • That's not selecting the `.text` classes...it's selecting elements. Try changing one of the classes with something else and it will break. http://jsfiddle.net/XtvLW/3/ – Paulie_D Feb 18 '14 at 15:52
  • Like this fiddle? It seems to be working just fine: http://jsfiddle.net/XtvLW/4/ – dlane Feb 18 '14 at 15:54
  • @Corey Ogburn Are you trying to do something like this: http://jsfiddle.net/937vS/2/ – Paulie_D Feb 18 '14 at 15:54
  • @dward `nth` only selects **elements** not classes. hence your second fiddle works. – Paulie_D Feb 18 '14 at 15:56
  • @Paulie_D No. Like the fiddle in my question (when viewed in IE) I only want to hide the drop down arrow in the select box. Nothing affecting the options. – Corey Ogburn Feb 18 '14 at 16:00
  • 1
    I guess I'm not getting something @Paulie_D... Because both the fiddles work, using a `div.class` and a normal element, like `p`. I see your fiddle, and get that using those pre-chosen selectors (whether its a class or element), that determines how the `nth` works. However, when using CSS, don't you almost always provide context when applying attributes (like a class, or nested selector sequence like ul > li)? – dlane Feb 18 '14 at 16:02
  • Ah...the arrow is not a child of the select box...it's an essential part of the browser object. Not sure you can do that. – Paulie_D Feb 18 '14 at 16:03
  • @dward The fact is that this is a pseudo-class so it doesn't quite apply like you might think. Sure it works if **all** the siblings have the **same** class but it's still not **actually** selecting the class at all...because it's already found the `nth` object because CSS reads right to left. At least that's the way I understand it. – Paulie_D Feb 18 '14 at 16:06
  • Appreciate the insight and continuous feedback @Paulie_D. I'll read up on how browsers apply pseudo classes, just so I better understand the concept. I guess I just don't 'yet' understand why you'd try to select something so general with CSS without applying context. Other than global elements (like font-family, size, etc), I feel you'd always give context to your CSS. – dlane Feb 18 '14 at 16:12
  • This still doesn't explain why `:first-child` works in a jsfiddle (and it does, whether it be a class or an element) but not on my site. I can't really give the source to the entire site, so instead I'm asking for what could in theory void this selector. – Corey Ogburn Feb 18 '14 at 16:41
  • @Carey Ogburn Perhaps a JSfiddle of your own in a new SO question. – Paulie_D Feb 18 '14 at 16:48
  • @Paulie_D I link to this jsfiddle in my current question: http://jsfiddle.net/937vS/ – Corey Ogburn Feb 18 '14 at 16:48
  • @dward: To clarify what Paulie_D said: every simple selector applies independently of all other simple selectors. This applies to element, class, ID, attribute, pseudo-class... and so on. When you chain several of these together, they all act as independent conditions, combined with logical AND, on each element that is evaluated. See http://stackoverflow.com/questions/5217086/css-selector-involving-pseudo-class-first-child-and-dropcap/5217102#5217102 and http://stackoverflow.com/questions/10106345/css-selector-engine-clarification/10108700#10108700 for some examples of how they are processed. – BoltClock Feb 18 '14 at 17:18
  • I'm not sure if your doctype is the cause of the problem, but it is invalid. The system identifier is missing and the EN needs to be uppercase. If you cannot use the HTML5 doctype ` `, use this instead: ` ` – BoltClock Feb 18 '14 at 17:48
  • @BoltClock We were previously using the HTML5 doctype but I didn't know that was a thing. I thought it was invalid. I reverted back to it and the problem persists. – Corey Ogburn Feb 18 '14 at 18:17

1 Answers1

1

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356