Forum Feature requests

:first :last :nth-child in page contexts

mimecine
Maybe there already is a way to do this that I haven't figured out, but being able to style a specified element on a page - and column - would be an incredibly helpful feature.
In my case I visually divide elements with a bottom border, but it looks funky if that border ends up at the bottom of a column or page.
Something like .selector:-prince-last {} maybe?
mimecine
Well, :-prince-page/column-last obviously...
I guess it can be done in JS, but I have a hard time making sense of the JS API docs.
dauwhe
Do you want Box Decoration Break?
mimecine
Sort of the opposite. If a box *isn't* breaking but ends up at the bottom of a column (or page) I would like to remove the bottom border. I circled the lines I'm trying to target in the attached screenshot.
  1. Screenshot 2025-02-06 at 11.41.04 AM.png1.3 MB
csant
Would it be a solution to set the border on the top of the boxes instead, except for the first one?
mimecine
It's a great idea but doesn't solve the cases of borders at the bottom (or now, top) of a column in a page. In my case I guess it would make it easier to target the border in javascript if they have a more predictable location - thanks for the suggestion! I'll fiddle with it!
chrisryland
What CSS needs at both the inline and block level is a kind of "separator" concept, where the separator is only used between items that are adjacent, and not between items that are on separate lines (inline) or columns (blocks).

E.g., for the inline case, you don't want

item1 • item2 * item3 *
item4 • item6 • item7long
• item8

etc., but

item1 • item2 * item3
item4 • item6 • item7long
item8

Same for your divs that need a separator line between them, but not at columns boundaries, neither above nor below.
howcome
Generally, CSS does not support such «layout-based styling». However, there are some exceptions:

- you can style the first line of a paragraph with the :first-line pseudo-element

- you can set margins, background colors and such on certain pages with :first, :left, :right, and :nth()

It's difficult to offer generic mechanisms for layout-based styling as you quickly end up with circular dependencies.

But I agree the the inline separator example you list is a valid use case, it should be possible to address through the box-tracking API.

Edited by howcome