How to select the first element from a selection when one element does not have a class via CSS?

Question

I have a list of jQuery Mobile collapsibles being displayed left to right (= tabs) and I'm stuck with writing the CSS for rounded corners on the first and last tab.

All tabs have a classes of ui-collapsible and ui-collapsible-collapsed, the first and last one have ui-first-child and ui-last-child respectively.

Example:

div.ui-collapsible-set
    div.ui-collapsible.ui-collapsible-collapsed.ui-first-child
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible.ui-collapsible-collapsed.ui-last-child

One tab open:

div.ui-collapsible-set
    div.ui-collapsible.ui-collapsible-collapsed.ui-first-child
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible // OPEN
    div.ui-collapsible.ui-collapsible-collapsed.ui-last-child

jQuery Mobile removes ui-collapsible-collapsed.

CSS should be:

/* default = round corners first tab bottom left, last tab bottom right */
.ui-collapsible-set-horizontal .ui-collapsible.ui-collapsible-collapsed.ui-first-child {
    border-bottom-left-radius: inherit;
}
.ui-collapsible-set-horizontal .ui-collapsible.ui-collapsible-collapsed.ui-last-child {
  border-bottom-right-radius: inherit;
}

/* first tab with one tab open - DOES NOT WORK */
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-collapsed) ~ .ui-collapsible.ui-first-child {
    border-bottom-left-radius: 0;
}

/* last tab with one tab open - OK */
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-collapsed) ~ .ui-collapsible.ui-last-child {
    border-bottom-right-radius: 0;
}

My CSS only works for the last tab, but not for the first... and I have no clue why.

I'm not able to set anything on the first tab using the above selector (border, background, anything), so the selector does not work I assume.

Question:
How do I correctly target the collapsible with ui-first-child when one of the collapsibles (including itself) does not have a class of ui-collapsible-collapsed?

Answer 1

Ideally both of these should work. You just might have made your selectors a little more complex than they needed to be. I've just edited this post. I think this will work although I understood your requirement correctly the first time.

.ui-collapsible-set .ui-collapsible.ui-collapsible-collapsed.ui-first-child,
.ui-collapsible-set .ui-collapsible.ui-first-child {
    border-bottom-left-radius: 0;
}