左から右 (= タブ) に表示される jQuery Mobile の折りたたみ可能なリストがあり、最初と最後のタブで角を丸くするための CSS を書くことに行き詰まっています。
すべてのタブには と のクラスがui-collapsibleありui-collapsible-collapsed、最初と最後のタブにはそれぞれ と がui-first-childありui-last-childます。
例：
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
1 つのタブが開いています:
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 は を削除しui-collapsible-collapsedます。
CSS は次のようにする必要があります。
/* 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;
}
私の CSS は最後のタブでしか機能しませんが、最初のタブでは機能しません...その理由はわかりません。
上記のセレクター (境界線、背景など) を使用して最初のタブで何も設定できないため、セレクターが機能しないと思います。
質問:折りたたみ可能オブジェクトの 1 つ (それ自体を含む) に のクラスがない場合
、折りたたみ可能オブジェクトを正しくターゲットにするにはどうすればよいですか?ui-first-childui-collapsible-collapsed