How to use :first-child and :last-child CSS pseudoclasses within a ListRecords

I have multiple ListRecords with within them a container which contains a linked expression. I tried to make the first and last container in the list have rounded corners by doing:

.ListRecords:first-child{
    border-radius: 15px 15px 0px 0px;
}

.ListRecords:last-child{
    border-radius: 0px 0px 15px 15px;
}

But this changed nothing.

Hi Mick,

Can you please share the link so that we can inspect the element and help you.


Regards,

Pankaj

Pankaj pant wrote:

Hi Mick,

Can you please share the link so that we can inspect the element and help you.


Regards,

Pankaj

I can't share a link since the program itself is not publicly accessible


if needed i can post the full code of the inspected element though


hi Mick,


can you use something like below?


Regards,

Pankaj


Solution

Hi below is the CSS that works when you set the line separator to none in list record.

SyntaxEditor Code Snippet

.ListRecords div:first-child {
    border: 1px solid;
    border-radius: 25px;
    background: green;
}
.ListRecords div:last-child {
    background: red;
    border: 1px solid;
    border-radius: 25px;
}



Regards,

Pankaj


Solution

Thank you Pankaj this worked