First and last of a div with an assigned class...

[Jim R]

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;
}

 

 

[kicken]

You really need to post the accompanying HTML when asking CSS questions, since the HTML layout can affect the CSS.

[Jim R]

[Jim R]

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. 

[kicken]

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.

[Jim R]

 

 

<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&amp;grade=23">Power Forward</a></span>  ||  Warren Central</div>


</div>  // end update_card

</div> // end blw

 

[maxxd]

.update-card has the background color. Use border-radius on that.

[Jim R]

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.  

[maxxd]

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...

[kicken]

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;
}

 

[Jim R]

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

[kicken]

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).

 

[maxxd]

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?

[maxxd]

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.

[Jim R]

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).

 

 

 

 

 

[Jim R]

I could add an extra <div> that only echoes once in the loop, effectively creating a container. 

[Jim R]

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

[kicken]

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

[Jim R]

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