Re: [csswg-drafts] [css-selectors] Standardize `:(‑moz‑)first‑node` and `:(‑moz‑)last‑node` (#3216)

Considering the previous comments, I see two main use cases.

# Styling elements (differently) based on whether they have preceding and/or subsequent text nodes

> Selectors mainly work on element level, and extending them to node level may cause some confusing, and ignoring white-space and comments isn't really what "last node" should mean...

If that's an issue, `:first-child`, `:last-child`, and `:only-child` could also get functional versions taking the types they should match:

```
:first-child( <child-type> )
:last-child( <child-type> )
:only-child( <child-type> )
```

where

```ebnf
<child-type> = elements || non-whitespace-text
```

As use cases presumably mostly match both types, that could also be expressed via a single keyword:

```
<child-type> = include-non-whitespace-text
```

@oriadam's example would then be covered by something like:

```css
.emoji:only-child(include-non-whitespace-text) {
  display: inline-block;
  width: 100px;
  height: 100px;
}
```

@ggedde's example could be done like this:

```css
button:has(> svg:is(:first-child(include-non-whitespace-text), :last-child(include-non-whitespace-text))) {
  …
}
```

@patrickhlauke's example might by covered by:

```css
:is(p, div, li, dd) > code,
td > code:not(:only-child(include-non-whitespace-text)) {
  …
}
```

(Names are obviously to be discussed, but depending on what will be resolved on in #1967, the keywords should possibly match the ones there.)

# Styling text nodes themselves

That use case is discussed in #2208, as @SelenIT previously mentioned. Though depending on how whitespace-only nodes are handled and whether the pseudo-classes above also work on the pseudo-element discussed there, the first use case would also be covered.

E.g. @simevidas's example could then be done via:

```css
p:not(:has(> ::text-node:first-child)) > strong:first-child {
  text-transform: uppercase;
  font-weight: 700;
}
```

@ExE-Boss's example would look like this:

```css
span:last-child,
::text:last-child {
  background-color: lime;
}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3216#issuecomment-3425904103 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 21 October 2025 10:40:57 UTC