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?

frequent
  • 27,643
  • 59
  • 181
  • 333

1 Answers1

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;
}
AdityaSaxena
  • 2,147
  • 11
  • 16
  • But all tabs can be closed. Then first and last need round corners on bottom left/right. – frequent Aug 14 '13 at 09:05
  • just edited...does it work ? it should work as rounded corners in both the cases (collapsed or expanded) – AdityaSaxena Aug 14 '13 at 09:11
  • sort of works, have to play with it. I think my problem is related to http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – frequent Aug 14 '13 at 09:51
  • See I think you're using that selector right..but it is not fetching anything for you. Whether collapsed or not, the first and last always have rounded corners, since you're using a previous sibling selector, it is not fetching anything. – AdityaSaxena Aug 14 '13 at 09:58
  • I'm not really understanding why it does not work. I did not know `~` only goes "forward" = not with preceeding items, but then the last tab should not work... confused... :-) Thanks for helping out – frequent Aug 14 '13 at 09:59
  • Ok. I understand. When I click the 2nd element, the sibling selector will not allow me to modify the 1st element, because CSS ~ only works for "trailing" siblings. Need to shuffle my logic a bit. – frequent Aug 14 '13 at 10:02
  • Okay..let me try again to explain...what you're doing there is trying to find a tab which does not have the class ui-collapsible-collapsed and according to the css you wrote, there should be something of that kind before ui-first-child - which is not possible..right ? there is no tab before the first child. Hence, no selection. Read it up in detail here : https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors – AdityaSaxena Aug 14 '13 at 10:03
  • sorry, but we're still not on the same page. Clicking on the 2nd tab should give the 1st tab a straight corner, which is not possible to do via CSS `~` because this can only target tabs after itself. So when I click on 2nd I can ~ color: red the 3rd, 4th and 5th tab, but not the first. So my question should be how to CSS target the first element on a list when clicking on then 2nd element – frequent Aug 14 '13 at 16:30
  • Hmm..I think I somewhat get what you need. but can you verify my understanding as follows: 1. 1st tab's bottom left radius should be always none..right ? 2. last tab bottom right radius should be always none..right ? – AdityaSaxena Aug 14 '13 at 16:32
  • Almost. Last is working. First should be round by default (ok), 0 if first is clicked (ok) and 0 if 2nd to x tab is clicked (not ok), because the sibling selector can not select preceding elements. So click on 2 can never alter 1. – frequent Aug 14 '13 at 17:26