How do you use :last-child without defining the elements on the HTML page?

Question

I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:

.myCustomButton {
  border: 1.5px solid black;
}

.myCustomButton:not(:last-child) {
  border-bottom: none;
}

I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.

I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.

<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
    <items class="a">
        <Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
        <Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
        <Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
    </items>
</VBox>

To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:

<script>
    sap.ui.getCore().attachInit(function() {
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                height : "100%",
                name : "ExampleScreen2"
            })
        }).placeAt("content");
    });
</script>

So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?

Answer 1

What happens is that sapui5 add a 'div' layer for each child of a VBox.

that means the generated html will look like

<div>              <-- VBox
  <div>            <-- item 1 container
    <button />
  </div>
  <div>            <-- item 2 container
    <button />
  </div>
  ...
</div>

thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)

to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as

.myCustomButtonContainer > .sapMFlexItem {
  border: 1.5px solid black;
}

.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
  border-bottom: none;
}