Day 13: List 🗒️

An (unordered) list usually consists of items displayed as bullets.

The example component is visible below.

• Santa Claus 🎅
• Mrs. Claus 🤶
• Rudolph 🦌
• The Grinch 🟢

A few notes about this list component:

• CSS Variables are used for colors,
• the list-style-position: inside declaration is used to define the position of list markers,
• the ::marker pseudo-element is used to target and style list markers.

The code:

<ul class="advent-list">
  <li>Santa Claus 🎅</li>
  <li>Mrs. Claus 🤶</li>
  <li>Rudolph 🦌</li>
  <li>Grinch 🟢</li>
</ul>

.advent-list {
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  padding: 0;
  margin: 2em 0;
  list-style-position: inside;
}

.advent-list li:nth-child(even)::marker {
  color: var(--color-xmas-gamma);
}

.advent-list li:nth-child(odd)::marker {
  color: var(--color-xmas-beta);
}