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


Tags: html,css,css3,css-selectors,siblings

Problem :

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?



Solution :

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;
}

    CSS Howto..

    How to make cut off in CSS as shown in the attached image?

    How to display 20 columns in html design

    How to make bootstrap btn-group break into half naturally

    How Do I Make Li Clickable for Radio Button Inside

    How do I prevent sliced images in the CSS background from sitting on each other?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    How to style HTML select option hover and selected option effects

    how to change negative sign position css

    How to center a rotated div inside a table element with a specific width?

    How to target CSS module classes after they are hashed?

    How do I replicate this website in terms of responsiveness using only css?

    How to draw scalable rectangles Ruby on Rails

    How to animate an unknown number of items in sequence using css animations?

    how to get value from this html date-ranger?

    How to override Liferay core' css?

    css + thymeleaf - How to auto-adjust displayed screen size?

    How is this menu icon created only with CSS?

    How to make 2 divs on 1 side (up&down)

    how to make tab bar in jquery mobile?

    How to center an attribute is position is absolute?

    How to overlay two fonts with css

    change of encoding shows Weird symbols

    How can I create a CSS “well” effect similar to bootstap but deeper?

    html element h1 with links as background image show them in one line

    How to apply css transformations on HTML elements using jQuery?

    How to positioning an element over another in CSS

    How to make an image appear over another image when mouse hovers with css3?

    How to call a CSS file from the right place

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to set ribbon on image by stacking it in a div?