That one annoying CSS question

At the last three DrupalCamps Ruhr, attendees were invited to participate in a Nerd Quiz. Questions included topics such as pop culture (literature, movies, music, TV series, comics), some general knowledge (like country shapes or images of philosophers and artists), and some web and Drupal-related content.

If you want to check out all the questions yourself, you can click through the Nerd Quizzes for 2018, 2023, and 2025.
(The quizzes needed to work only on my laptop. So the slides are not optimized for Mobile. Use the arrow keys to navigate.)

Anyway, this year’s quiz included some CSS questions. You got some code and then had to figure out which selector wins. The last question turned out to be way harder than intended. I had switched the CSS around too much and stumbled over my own shenanigans. So while I had the correct answer written down, I couldn’t explain why it was correct. Very annoying. But maybe you can figure out what is going on there?

Let’s start with an easy example:

<p>What is my color?</p>

p { color: black; }
p { color: red; }
p { color: green; }
p { color: blue; }

Yes, this one is simple. The selectors are all the same. The last line wins: the paragraph will be blue.

Now, over to the real questions. If you are a frontend developer and see these with fresh eyes, the answers more or less obvious. But the quiz happened in the evening, after seven sessions. And not everyone in the audience did frontend development for a living. So these questions were a bit more difficult for most.

Also, since this is part of a quiz, the questions are not designed to have every team answer all questions correctly. In the end, I needed a winner. So the questions are supposed to get harder, with the last question being the hardest.

CSS Question 1

<p class="eeny meeny miny" id="moe">What is my color?</p>

.eenie { color: fuchsia; }
.meeny { color: orange; }
#moo { color: black; }
.eeny.meeny.minny { color: white; }

CSS Question 2

<p class="eeny meeny miny moe">What is my color?
Those names, is there a trick?</p>

.eeny { color: AliceBlue; }
.meeny { color: DarkGoldenRod; }
.miny { color: FireBrick; }
.moe { color: MediumSeaGreen; }

This looks like there are four available answers. But what happens when the browser discards every line as wrong? Maybe there is a fifth color?

CSS Question 3

<p class="eeny meeny miny moe">What is my color?</p>

p.eeny { color: AliceBlue; }
:where(p.eeny) { color: DarkGoldenRod; }
:is(p.eeny) { color: FireBrick; }
:where(p.eeny) { color: IAmGroot; }

With :where and :is entering the code, this is now the territory of frontend developers.

CSS Question 4

<p class="eeny meeny miny moe">What is my color?</p>

p.eeny { color: AliceBlue; }
:is(p.eeny) { color: DarkGoldenRod; }
:where(p.eeny) { color: FireBrick; }
:is(p.eeny) { color: IAmGroot; }

Hmm. This is basically the same as before, only :is and :where are switched. So either this does nothing, and the answer is the same as before. Or there is a difference somehow?

CSS Question 5

<p class="eeny meeny miny moe">What the hell!?</p>

:has(.eeny):has(.meeny):has(.miny):has(.moe) { color: Red; }
:has(.eeny):has(.meeny):not(.many):has(.moe) { color: Green; }
:has(.eeny):has(.meeny):not(.many):not(.moo) { color: Blue; }
:has(.eeny):has(.meeny):not(.miny):not(.moo) { color: RebeccaPurple; }
:has(.eeny.meeny):not(.miny):not(.moo) { color: Orange; }
:has(.eeny.miny):is(.meeny):has(.moo) { color: Black; }
:has(.eeny.miny):has(.meeny):has(.moo) { color: Fuchsia; }

So this is the last question of the CSS section. I did not intend to make this difficult. I rather wanted to make it annoying. It turned out to be a bad question. Answerable, sure, but not suited for this quiz.

<p class="eeny meeny">
  <span class="miny moe">What the hell!?</span>
</p>

All in all, this was the very last question I added to the quiz. And I changed it around too much. The result is just a bad question. It should not have been in the quiz. My fault.
At least this didn’t change the winning order, as no team picked the right answer. On the plus side: I can use this for a blog article.

In the end, I learned this: Don’t try to make the questions too hard/annoying. (And I hope I remember this if there will ever be another Nerd Quiz.)