Custom style for first (second, third, ...) slide

[jficz]

Hi, I'd like to be able to set a background image for the first slide in any deck that uses my theme (and in extension style any slide explicitly based on its absolute position in the deck alone).

This is somewhat similar to marp-team/marpit#181 and the solution mentioned there works (so long as I add an explicit class to the first slide) but since the slide is perfectly identified by it's ID (section#1) I assumed something like this may work:

section#1 {
  background-image: url("path/to/file.jpg");
}

But it doesn't.

If I replace the selector with section.first (and add superfluous <!-- class: first --> in the MD) it work as expected.

Am I missing something?

[yhatt]

By CSS spec, ID selector # cannot start with a number without escaping.
https://css-tricks.com/ids-cannot-start-with-a-number/
https://www.w3.org/TR/CSS21/syndata.html#characters:~:text=they%20cannot%20start%20with%20a%20digit

section#1 { /* Invalid */
  color: red;
}

section[id="2"] { /* Valid */
  color: red;
}

section#\33 { /* Valid */
  color: red;
}

Example: https://jsfiddle.net/unvb2rkp/

[yhatt]

Warning

Using ID selector should normally work in the use of Marp official tools (Marp CLI, Marp for VS Code), but note that there is no guarantee that they will work throughout the ecosystem. If framework's anchor option was changed/disabled by the Marp integrated app or user, id attribute may have another format, or not exist.
https://marpit-api.marp.app/marpit#:~:text=Description-,anchor,-boolean%20%7C%20Marpit
marp-team/marpit#340

[jficz]

Ah, thanks, didn't know that.