Hi,
I’m new here. Trying to get vertical lines between my blog in a grid. This is what I wanna do:
Notice the thin gray lines between post 1 and 2 and between 2 and 3. Can I do that without having one either left of 1 or right-side of 3?
Only thinking in using borders as I’m not aware of any other tricks.
Thanks.
Edit: The first image didnt show what I’m going for.
Here is my public share link: LINK
(how to access public share link)
There are a couple of options you can take here to achieve the separating lines between your columns.
The first is giving the base class of your column a left border and adding a combo class to the first element to remove the left border on that element only. This is possible natively within the Designer, but is a bit less flexible as the first element always needs to have another class applied to it.
The second (which is what I use in my projects) is with custom code and the + CSS selector. This allows me to target elements only if they come immediately after another with the same class. Essentially I can achieve the same effect as above, with only a single class and CSS rule:
.YOUR-COLUMN-CLASS + .YOUR-COLUMN-CLASS {
border-left: 1px solid red;
}
If you run into any issues don’t hesitate to reach out 
Thanks.
Your first suggestion is what I was trying to do but couldn’t find a way to achieve as the contents are dynamic through CMS ← did you catch this part of my problem description?
Reading up on the + selector I think I understand your second suggestion but again, it’s not clear to me if it will work with my dynamic content.
Edit: one solution that comes to mind is using :first-child on the parent class - any comments on that?
hi @AndyOhh sorry to step in and offer another option how to
:last-child of CMS items and set for it right-border: none<style>
.list-item:last-child .content__c{
border-right: none;
}
</style>
if you would like to have higher specificity you can add parent element like this.
.list .list-item:last-child .content__c{
border-right: none;
}
My apologies, I didn’t see any specifics in the post body but I see you did include that in the post title.
As you and @Stan touched on, there are :first/last-child selectors that can be used to target the element (without a combo class) and both would work as well to solve the issue. There are typically lots of different ways to solve any given problem in CSS, and in my case, I tend to use the + selector most often.
Thankfully in your case, you’re using the CMS and Webflow recently made it possible to target these types of elements within a Collection list—natively in the Designer:
Thanks to you both. I’ve selected mikey’s second reply as the answer as it also solves the problem without having to use custom code.
