/* Select 3rd child */
li:nth-child(3) {
  color: red;
}

/* Select all even items */
li:nth-child(even) {
  background: #f0f0f0;
}

/* Select all odd items */
li:nth-child(odd) {
  background: white;
}

/* Every 2nd child (same as even) */
li:nth-child(2n) {
  color: blue;
}

/* Every 3rd child */
li:nth-child(3n) {
  font-weight: bold;
}

/* Every 3rd child starting at 1st (1, 4, 7, 10...) */
li:nth-child(3n+1) {
  text-transform: uppercase;
}

/* Every 4th child starting at 2nd (2, 6, 10, 14...) */
li:nth-child(4n+2) {
  color: green;
}

/* Select 5th to 10th children */
li:nth-child(n+5):nth-child(-n+10) {
  border: 1px solid #ddd;
}

/* Last 3 children */
li:nth-child(n+3):last-child,
li:nth-last-child(-n+3) {
  color: purple;
}

/* Different type: nth-of-type */
p:nth-of-type(2) {
  /* 2nd paragraph only, ignores other element types */
  font-size: 18px;
}

/* Formula: An+B (where A is increment, B is offset) */

/* 2n: every 2nd element (2, 4, 6, 8...) */
li:nth-child(2n) { }

/* 2n+1: every 2nd starting at 1st (1, 3, 5, 7...) odd */
li:nth-child(2n+1) { }

/* 3n: every 3rd (3, 6, 9, 12...) */
li:nth-child(3n) { }

/* 3n+1: every 3rd starting at 1st (1, 4, 7, 10...) */
li:nth-child(3n+1) { }

/* 3n+2: every 3rd starting at 2nd (2, 5, 8, 11...) */
li:nth-child(3n+2) { }

/* 4n: every 4th (4, 8, 12, 16...) */
li:nth-child(4n) { }

/* 4n+1: every 4th starting at 1st (1, 5, 9, 13...) */
li:nth-child(4n+1) { }

/* n+3: 3rd element onwards (3, 4, 5, 6...) */
li:nth-child(n+3) { }

/* -n+5: first 5 elements (1, 2, 3, 4, 5) */
li:nth-child(-n+5) { }

/* Even (2n) and Odd (2n+1) are shortcuts */
li:nth-child(even) { } /* same as 2n */
li:nth-child(odd) { } /* same as 2n+1 */

/* Alternating row colors */
tr:nth-child(even) {
  background: #f9f9f9;
}

tr:nth-child(odd) {
  background: white;
}

/* Three-color pattern */
.item:nth-child(3n+1) { background: #e3f2fd; }
.item:nth-child(3n+2) { background: #f3e5f5; }
.item:nth-child(3n) { background: #e8f5e9; }

/* Staggered animation */
.card {
  animation: slide-up 0.6s ease forwards;
}

.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }

/* OR using formula */
.card:nth-child(n) {
  animation: slide-up 0.6s ease forwards;
  animation-delay: calc((var(--index, 0) - 1) * 0.1s);
}

/* Grid column span pattern */
.grid-item:nth-child(3n+1) {
  grid-column: span 2;
  /* Every 3rd item starting at 1st spans 2 columns */
}

/* Font size progression */
.heading:nth-child(1) { font-size: 32px; }
.heading:nth-child(2) { font-size: 28px; }
.heading:nth-child(3) { font-size: 24px; }
.heading:nth-child(4) { font-size: 20px; }
.heading:nth-child(n+5) { font-size: 16px; }

/* Hover accent every 4th item */
.item:nth-child(4n) {
  border-left: 4px solid #3498db;
}

/* Different styling for first and last */
.item:first-child { font-weight: bold; }
.item:last-child { font-style: italic; }

/* First 3 items emphasized */
.item:nth-child(-n+3) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* HTML structure */
/*
<div>
  <p>Paragraph 1</p>      <!-- p:nth-child(1), p:nth-of-type(1) -->
  <span>Span 1</span>      <!-- span:nth-child(2) -->
  <p>Paragraph 2</p>       <!-- p:nth-child(3), p:nth-of-type(2) -->
  <span>Span 2</span>      <!-- span:nth-child(4) -->
  <p>Paragraph 3</p>       <!-- p:nth-child(5), p:nth-of-type(3) -->
</div>
*/

/* nth-child: counts all children, filters by type */
p:nth-child(2) { } /* Matches nothing! p is not 2nd child */
p:nth-child(3) { } /* Matches "Paragraph 2" (3rd child overall) */

/* nth-of-type: counts only that type */
p:nth-of-type(1) { } /* Matches "Paragraph 1" (1st p) */
p:nth-of-type(2) { } /* Matches "Paragraph 2" (2nd p) */
p:nth-of-type(3) { } /* Matches "Paragraph 3" (3rd p) */

/* Example: styling paragraphs */

/* With mixed content, use nth-of-type */
article p:nth-of-type(1) {
  font-size: 18px;
  font-weight: bold;
  /* Always styles 1st paragraph, regardless of other elements */
}

article p:nth-of-type(2) {
  color: #666;
  /* Always styles 2nd paragraph */
}

/* nth-child for regular lists (all same type) */
li:nth-child(even) {
  background: #f0f0f0;
  /* All items are <li>, so nth-child and nth-of-type equivalent */
}

/* Combine selectors for complex patterns */

/* Every 4th item, but skip first 2 */
.item:nth-child(n+3):nth-child(4n+3) {
  color: blue;
}

/* Exclude first and last */
.item:nth-child(n+2):nth-last-child(n+2) {
  border: 1px solid #ddd;
}

/* Range: from 5th to 10th */
.item:nth-child(n+5):nth-child(-n+10) {
  background: yellow;
}

/* Last 5 items */
.item:nth-last-child(-n+5) {
  font-weight: bold;
}

/* Only child (single item) */
.item:only-child {
  margin: 20px;
}

/* First of type and last of type */
p:first-of-type {
  font-size: 20px;
}

p:last-of-type {
  font-size: 14px;
}

/* Pattern matching with formulas */
/* Every 4th starting at 3rd: 3, 7, 11, 15... */
.item:nth-child(4n+3) {
  border-top: 3px solid #3498db;
}

/* Complex grid pattern */
.grid-item:nth-child(6n+1),
.grid-item:nth-child(6n+2) {
  grid-column: span 2;
  /* First 2 items of every 6 span 2 columns */
}