0

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?

4

1 回答 1

1

理想情况下，这两种方法都应该起作用。你可能只是让你的选择器比他们需要的更复杂一些。我刚刚编辑了这篇文章。我认为这会起作用，尽管我第一次正确理解了您的要求。

.ui-collapsible-set .ui-collapsible.ui-collapsible-collapsed.ui-first-child,
.ui-collapsible-set .ui-collapsible.ui-first-child {
    border-bottom-left-radius: 0;
}
于 2013-08-14T09:03:31.373 回答