Skip to Content (Press Enter)
UserImage.jpg
Mick van der Meijde
194Views
6Comments
Solved
How to use :first-child and :last-child CSS pseudoclasses within a ListRecords
Question

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.

OutSystemsExample.PNG
0
0
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


See solution in context
0
1
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Hi Mick,

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


Regards,

Pankaj

0
0
23 Jan 2019
Copy Link
UserImage.jpg
Mick van der Meijde

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


0
0
23 Jan 2019
Copy Link
UserImage.jpg
Mick van der Meijde

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


0
0
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

hi Mick,


can you use something like below?


Regards,

Pankaj


0
0
23 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


0
1
23 Jan 2019
Copy Link
UserImage.jpg
Mick van der Meijde

Thank you Pankaj this worked 

0
0
23 Jan 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.