Hi guys, how you doing?
I m trying to do an accordion where the first accordion item gets a border-radius 24px 0px 0px 0px and the last one 0px 0px 24px 0px. i tried with the first and last of type, but the last-of-type is overriding the first one. Can anyone help me out with this?
Hi João,
Taking a look at how the accordion is structured, a script will be added as the last element of the accordion, and you want to add the CSS to one before last-child:
Therefore, your CSS should be something like this:
.osui-accordion .list [data-block="Content.AccordionItem"]:nth-last-child(2) .osui-accordion-item { border-radius: 0px 0px 24px 0px;}
Kind Regards,João
Apply the below CSS..osui-accordion :first-child:not(.list) > .osui-accordion-item, .osui-accordion .list :first-child > .osui-accordion-item { background: orange; border-radius: 24px 0px 0px 0px;}.osui-accordion :last-child:not(.list) > .osui-accordion-item, .list{ background: green; border-radius: 0px 0px 24px 0px;}
Oml is also attached for reference.Check the Demo here
RegardsKrishnanand Pathak
.osui-accordion .list [data-block="Content.AccordionItem"]:nth-child(2) .osui-accordion-item {
border-radius: 24px 0px 0px 0px;
}
.osui-accordion .list [data-block="Content.AccordionItem"]:nth-last-child(2) .osui-accordion-item {
border-radius: 0px 0px 24px 0px;
I inserted this two and it works as i wanted, thank you João for the fast answer! Krishnanand unfortunately your solution only works on the last item and the background is being aplied to the page not to the component, João's solution seems to work better