How can I single out this array element and style it?
I have put the code up in https://stackblitz.com/edit/stackblitz-starters-bp8otn?file=constant%2Findex.ts
I have included only the two files relevant, components/footerNav/FooterNav.tsx and constant/index.ts
The screenshot is of a nav bar at the footer of the main page of an application all enclosed in a div , I am trying to place the first element on the left on top of the row of elements, toward the center, and style it to be a bit bigger.
As the title mentions the elements are in the form of an array mapped into a link/links. The array definition is found in the index page, while the mapping and display logic is found in the footerNav component page.
The links were previously displayed in a 2 column grid which was set in it's parent div, in order to break the flow and place the first link on top I changed the display to flex-row, and set the div to relative positioning, aiming to somehow single out the first element and give it an absolute positioning to place it above the row and to the center of the div.
The problem lies in how exactly to single out the first array element and give it it's own unique styling, as you'll see all the elements were given the same styling in one link tag. I think that's about all the information I have to offer, I hope it's enough, I appreciate any insights as I'm pretty much a beginner, this is my first project , thank you!
0 Replies