Games / Pili

Pili

Learn CSS selectors at the palengke: write the selector that picks exactly the right mangoes off the stall.

Level – Cleared –

Pick the right goods off the stall with a CSS selector.

Example

The stall's HTML

Hover a line or an item to see which is which.

Pili means "choose" or "pick". Every level is a palengke stall with mangoes, bananas, calamansi, pandesal, bottles and jars, and the HTML markup that describes it. Your job: write the CSS selector that picks exactly the goods the level asks for. They bob up and down so you know which ones.
As you type, the items your selector matches light up on the stall and in the markup. Press Enter (or Pili!) to pick. Any selector that matches exactly the right items wins, so there is often more than one answer.
The 32 levels start with type, class and id selectors, move on to combinators (A B, >, +, ~), attribute selectors and pseudo-classes like :nth-child(), :not() and :empty, and end with the newer :has(), :is() and :where().
Hover an item to see its line of HTML, or a line to find its item. Stuck after a couple of tries? Ask for the answer. Jump to any level from the Levels menu; your cleared levels stay in your own browser only.
Your selector runs with the browser's own querySelectorAll, so what works here works in your stylesheets and in JavaScript too.