-1

I've been struggling a long tome to figure this one out. Basically, I'll need to find the last child element of some element, which does neither have a specified class property, nor a specified style property.

I have tried everything that has been suggested here, without success.

What I want to achieve, is to make sure the last element inside of a "toolbar" have border-radius, such as can be seen here - https://home.gaiasoul.com/hyper-ide (to right corner)

However, every now and then, one of my buttons are hidden, because they're not supposed to be visible, since they're "disabled" for some reasons. At which point I can't simply use last-child selector, since this might select a button that is not visible.

I cannot use JavaScript, and absolutely not any jQuery.

Example of HTML where it should not select the last-child.

<div class="strip">
  <button>1. visible</button>
  <button>2. visible</button>
  <button class="hide">3. HIDDEN</button>
</div>

Basically, I want a selector that will find the last child element of "strip" from above, but not if it's invisible, which is the case for the last element above.

The reason why my example looks good, is because it does not have an invisible button. I want to accomplish the same, also if there was an invisible button as my last element ...

I have tried nth-last-child with a :not, as suggested in one of the other questions here (which is similar). Here is my current (relevant) CSS, which obviously doesn't work.

.strip {
    display: flex;
}
.strip>* {
    border: solid 1px var(--border-color);
    border-radius: 0;
    border-left-style: none;
}
.strip>*:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-left-style: solid;
}
.strip>*:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

I have tried

.strip>*:nth-last-child(1 of :not(.hide))

And all sorts of :not permutations, but it doesn't seem to work. Can it even be done ...?

Thomas Hansen
  • 39
  • 7
  • You need to show us what you tried. The border radius on the elements in the link you provide look fine. – Kevin Jantzer Jan 16 '18 at 18:25
  • I have edited my answer now, and provided an example of HTML which I would like to apply my selector ... – Thomas Hansen Jan 16 '18 at 18:41
  • @ThomasHansen Can you show us what CSS you've tried? "I've tried everything" doesn't cut it. – Daedalus Jan 16 '18 at 18:44
  • Does it matter? Can you solve it? Basically, create a selector that finds the second button in the above HTML example ... – Thomas Hansen Jan 16 '18 at 18:49
  • I have tried so many things, if I were to paste them all in here, I'd spend a long time simply remember them ...!! :P – Thomas Hansen Jan 16 '18 at 18:49
  • @ThomasHansen Help us help you; if our code is something you've already tried, we'd waste your time(and ours) by listing everything ourselves. – Daedalus Jan 16 '18 at 18:50
  • OK, done, there's some more example code there, and some permutations I have tried :) - However, I've been pounding at this for the latter parts of a day, and simply remember everything I've tried, would probably include the latter parts of the CSS W3C recommendations ...!! :P – Thomas Hansen Jan 16 '18 at 18:55
  • @Daedalus - Psst, you should play with that link. You have write access to the _"/test/"_ folder ... ;) – Thomas Hansen Jan 16 '18 at 19:14
  • @ThomasHansen I've researched and tested code against various test cases with no luck, so I'm leaving this to someone more knowledgeable. – Daedalus Jan 16 '18 at 19:22

1 Answers1

2

I don't think you will find a CSS solution while the border is applied to the button, as you are trying to apply a rule to a previous sibling element (more here).

However if you are open to applying the border to the wrapper (.strip) you may do something like this...

.strip {
  display: inline-flex;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
}

.strip button {
  border: 0;
}

.strip button:not(:first-of-type) {
  border-left: 1px solid black;
}

.hide {
  display:none;
}
<div class="strip">
  <button>1. visible</button>
  <button>2. visible</button>
  <button class="hide">3. HIDDEN</button>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59
  • Hehe, I feel stupid :) (*blush*) - Why on Earth didn't I think about that one ...? :D - Thx, you just made my day :) - I wish I could upvote it twice :) – Thomas Hansen Jan 16 '18 at 19:54
  • Happy to help :) – sol Jan 16 '18 at 19:54
  • Sorry for dragging my feet, got stuck in submodule problem with detached head at GitHub. Here are the changes :) - https://github.com/polterguy/micro/blob/master/media/micro.css#L412 Psst, if you'd like to have a look at my work, and see if I've done some other obvious errors, I'd love to have a second pair of eyes on it. It's basically a CSS framework ... – Thomas Hansen Jan 16 '18 at 21:46