Jim R Posted April 21, 2023 Share Posted April 21, 2023 Each of those names with information are on .update_card Since these lists will vary based on the user, I would like the first instance to have rounded corners at the top, and I'd like the last instance to have rounded corners at the bottom. CSS is below that I've tried... I've also tried first-of-type, last-of-type. Below is what I have now, which also doesn't work. .update_card { padding-left: 5px; margin-right: 10px !important; padding-bottom: 15px; background: #ccc; } .update_card:first-child() { border-radius: 10px 10px 0px 0px; } .update_card:last-child() { border-radius: 0px 0px 10px 10px; } Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/ Share on other sites More sharing options...
kicken Posted April 21, 2023 Share Posted April 21, 2023 You really need to post the accompanying HTML when asking CSS questions, since the HTML layout can affect the CSS. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607568 Share on other sites More sharing options...
Jim R Posted April 21, 2023 Author Share Posted April 21, 2023 Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607569 Share on other sites More sharing options...
Jim R Posted April 21, 2023 Author Share Posted April 21, 2023 Other styles are working on them, and one of the changes I've made today in altering its look is removing the border-radius from all four corners of each instance. At first I tried nth-of-type(#), but it almost seemed like it was working in reverse. That doesn't work though because the list in each class won't have the same names. Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607570 Share on other sites More sharing options...
kicken Posted April 21, 2023 Share Posted April 21, 2023 An image of code isn't code. We can't copy and paste an image into our editor and experiment to help solve the issue. It seems your HTML is not structured correctly for the nth/first/last pseudo selectors though. Those selectors only count elements that are on the same level. I can't tell for sure since your image is incomplete, but it looks like your update_card elements are wrapped by some other elements, meaning they are an only-child and thus both the first and last element. If you can't make your update_card elements siblings of each other, then you may need to create a class that you apply to the first and last elements manually. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607571 Share on other sites More sharing options...
Jim R Posted April 21, 2023 Author Share Posted April 21, 2023 <div class="blw"> <div class="update_grade">Class of 2023</div> <div class="update_card"> <div class="update_name"><span class="pName"><a href="/tag/jalen-hooks">Jalen Hooks</a></span> </div> <div class="update_information">6'7", <span class="update_position"><a href="/scout/player-rankings/?position=4&grade=23">Power Forward</a></span> || Warren Central</div> </div> // end update_card </div> // end blw Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607574 Share on other sites More sharing options...
maxxd Posted April 22, 2023 Share Posted April 22, 2023 .update-card has the background color. Use border-radius on that. Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607578 Share on other sites More sharing options...
Jim R Posted April 22, 2023 Author Share Posted April 22, 2023 2 hours ago, maxxd said: .update-card has the background color. Use border-radius on that. I want the first instance to have a top border radius, and I want the last instance to have a bottom border radius. The one(s) in the middle, I just want them to be flat/flush. Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607581 Share on other sites More sharing options...
maxxd Posted April 22, 2023 Share Posted April 22, 2023 Then it's quite possible you're going to need to revisit the markup. What it comes down to is that whatever element(s) you want to have the rounded borders is where you need to put the background color. Or you might be able to put the rounded borders on the parent element with an overflow set to hidden, but it's late on a Friday night for me so please don't quote me on that... Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607582 Share on other sites More sharing options...
kicken Posted April 22, 2023 Share Posted April 22, 2023 If you wrap all your update card elements in a container, and have them all be siblings, then you can get the effect you want using :first-child and :last-child <div class="blw"> <div class="update_grade">Class of 2023</div> <div class="update-list"> <div class="update_card"> ... Jalen Hooks ... </div> <div class="update_card"> ... Logan Imes ... </div> <div class="update_card"> ... Spencer White ... </div> </div> </div> .update_card:first-child { border-radius: 10px 10px 0px 0px; } .update_card:last-child { border-radius: 0px 0px 10px 10px; } Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607610 Share on other sites More sharing options...
Jim R Posted April 22, 2023 Author Share Posted April 22, 2023 (edited) 2 hours ago, kicken said: If you wrap all your update card elements in a container, and have them all be siblings, then you can get the effect you want using :first-child and :last-child blw is the container. I have a few similar containers housing update_card instances. .blw .update_card:first-child { border-radius: 10px 10px 0px 0px; } .blw .update_card:last-child { border-radius: 0px 0px 10px 10px; } This is what it produced: Edited April 22, 2023 by Jim R Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607612 Share on other sites More sharing options...
Solution kicken Posted April 22, 2023 Solution Share Posted April 22, 2023 2 hours ago, Jim R said: blw is the container. The container needs to contain only your .update_card elements, and those elements must be direct children of the container. Your original HTML doesn't meet those requirements. The .blw element also contains your .update_grade element (which is the :first-child). Your screenshot suggests every .update-card is wrapped in some other parent element (hence, they all are :last-child of that container). 1 Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607616 Share on other sites More sharing options...
maxxd Posted April 23, 2023 Share Posted April 23, 2023 Using the markup in the thread and this CSS .update_card{ width: 300px; height: 100px; background-color: red; } .update-list{ margin: 20px; border-radius: 10px; overflow: hidden; width: fit-content; display: flex; flex-direction: column; row-gap: 20px; } give me this It looks like that's what you want? 1 Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607617 Share on other sites More sharing options...
maxxd Posted April 23, 2023 Share Posted April 23, 2023 The height and width on .update-card is just there to see the effect. You can remove them and add some padding to the div to make it dynamic. Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607618 Share on other sites More sharing options...
Jim R Posted April 23, 2023 Author Share Posted April 23, 2023 5 hours ago, kicken said: The container needs to contain only your .update_card elements, and those elements must be direct children of the container. Your original HTML doesn't meet those requirements. The .blw element also contains your .update_grade element (which is the :first-child). Your screenshot suggests every .update-card is wrapped in some other parent element (hence, they all are :last-child of that container). Makes sense, but it has to include update_grade because I'm cycling through multiple players in multiple grades. In theory it's unavoidable because I don't control how many players my User bookmarks. I was wrong though on one point, the .blw isn't a container. It's just a way to set update_card apart from other parts of the site. Seems like there would be something to the effect of .update_card:nth-of-type(first) / (last). Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607619 Share on other sites More sharing options...
Jim R Posted April 23, 2023 Author Share Posted April 23, 2023 I could add an extra <div> that only echoes once in the loop, effectively creating a container. Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607620 Share on other sites More sharing options...
Jim R Posted April 23, 2023 Author Share Posted April 23, 2023 (edited) It wasn't clear cut, but I was able to embed a separate container within each Grade (2023, 2024, etc). Would love to get rid of those tiny gaps though. Edited April 23, 2023 by Jim R Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607621 Share on other sites More sharing options...
kicken Posted April 23, 2023 Share Posted April 23, 2023 (edited) 2 hours ago, Jim R said: Seems like there would be something to the effect of .update_card:nth-of-type(first) / (last). *-of-type only consider the tag name as the type, not any classes or id's applied to an element. The selector would be more accurately read as *:first-of-type.update_card {}. So, using that you could have other elements in your container, so long as they used different tag names. It's easier to just have a dedicated element and use :first-child / :last-child imo though. 1 hour ago, Jim R said: Would love to get rid of those tiny gaps though. You'll have to determine the source of them. Browser's developer tools should help with that. My guess would be some sort of margin. Such gaps don't appear when using the example code from above. If you can't find the issue, you'll need to provide updated HTML and CSS code, or a fiddle link, that re-creates the issue. Edited April 23, 2023 by kicken Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607622 Share on other sites More sharing options...
Jim R Posted April 23, 2023 Author Share Posted April 23, 2023 (edited) 7 hours ago, kicken said: You'll have to determine the source of them. Browser's developer tools should help with that. My guess would be some sort of margin. Such gaps don't appear when using the example code from above. If you can't find the issue, you'll need to provide updated HTML and CSS code, or a fiddle link, that re-creates the issue. For some reason the border-radius of the last instance is creating it. When I turn it off it disappears. I did on the last instance, margin-top: -1px; It worked. Edited April 23, 2023 by Jim R Quote Link to comment https://forums.phpfreaks.com/topic/316170-first-and-last-of-a-div-with-an-assigned-class/#findComment-1607635 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.