Selectors Deep-Dive - Pseudo-Classes, Structural & Form Selectors

<!-- HTML -->
<div>
  <h3>Heading</h3>           <!-- child #1 -->
  <p>First paragraph</p>     <!-- child #2 -->
  <p>Second paragraph</p>    <!-- child #3 -->
</div>

/* What most people THINK this does: "select the 2nd <p>" */
/* What it ACTUALLY does: "select an element that is a <p> AND is the 2nd child" */
p:nth-child(2) { background: #d4f5e9; border-left: 3px solid #2a9d8f; }

/* This matches NOTHING — child #1 is an h3, not a p */
p:nth-child(1) { background: red; }

<!-- Same HTML -->
<div>
  <h3>Heading</h3>
  <p>First paragraph</p>
  <p>Second paragraph</p>  <!-- ← this one matches -->
</div>

/* Counts only <p> elements among siblings — ignores the <h3> */
p:nth-of-type(2) { background: #d4f5e9; border-left: 3px solid #2a9d8f; }

<!-- HTML — all children are <li>, so :nth-child works intuitively here -->
<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

/* When all siblings are the same type, :nth-child is safe and intuitive */
li:first-child { font-weight: 600; color: blue; }
li:last-child  { font-weight: 600; color: coral; }
li:nth-child(3) { color: teal; }
li:nth-child(odd)  { background: #f8f8fa; }
li:nth-child(even) { background: white; }

:nth-child(odd)     /* = :nth-child(2n+1) — 1st, 3rd, 5th... */
:nth-child(even)    /* = :nth-child(2n)   — 2nd, 4th, 6th... */
:nth-child(3)       /* exactly the 3rd child */
:nth-child(3n)      /* every 3rd: 3, 6, 9, 12... */
:nth-child(3n+1)    /* every 3rd starting from 1st: 1, 4, 7, 10... */
:nth-child(n+4)     /* everything from the 4th onward: 4, 5, 6, 7... */
:nth-child(-n+3)    /* only the first 3: 1, 2, 3 */
:nth-last-child(2)  /* 2nd from the end */

/* Select every 2nd .highlighted item (ignoring non-highlighted ones) */
:nth-child(2n of .highlighted) { }

/* First visible item (counting only items without .hidden) */
:nth-child(1 of :not(.hidden)) { }

/* Every 3rd card in a grid, but only counting .card elements */
:nth-child(3n of .card) { }

<!-- HTML -->
<input type="email" placeholder="Email (try typing valid/invalid)">
<input type="text" required placeholder="Required field (type something)">
<input type="text" placeholder="I have dashed border while empty (placeholder-shown)">
<input type="text" value="I'm disabled" disabled>

/* CSS — form state pseudo-classes */
input:focus { border-color: blue; outline: 2px solid rgba(0,0,255,0.3); }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:placeholder-shown { border-style: dashed; }  /* field is empty (placeholder visible) */
input:disabled { opacity: 0.5; background: #f0f0f0; }

:hover        /* mouse is over it */
:active       /* being clicked/pressed right now */
:visited      /* link the user has visited before */
:link         /* unvisited link */
:target       /* element whose ID matches the URL fragment (#section) */
:fullscreen   /* element is in fullscreen mode */

<!-- HTML -->
<a href="#section-a">Go to A</a>
<a href="#section-b">Go to B</a>

<div id="section-a">Section A content</div>
<div id="section-b">Section B content</div>

/* CSS — style the element whose ID matches the URL #hash */
:target {
  background: #fff3e0;
  border: 2px solid coral;
}

/* Has the attribute at all */
[data-tooltip] { cursor: help; }

/* Attribute equals exact value */
[type="email"] { }
[role="button"] { }

/* Attribute starts with */
[href^="https"] { }          /* links starting with https */
[class^="icon-"] { }         /* classes starting with icon- */

/* Attribute ends with */
[src$=".svg"] { }            /* images ending in .svg */
[href$=".pdf"] { }           /* links to PDFs */

/* Attribute contains */
[class*="card"] { }          /* class contains "card" anywhere */

/* Attribute word list contains (space-separated) */
[class~="featured"] { }     /* same as .featured */

/* Case-insensitive matching */
[type="email" i] { }        /* matches "Email", "EMAIL", etc. */

/* Style external links differently (href starts with http, not your domain) */
a[href^="http"]:not([href*="yourdomain.com"]) {
  &::after { content: " ↗"; }
}

/* Required fields that are empty (show a subtle indicator) */
input:required:placeholder-shown {
  border-left: 3px solid coral;
}

/* First item that ISN'T hidden */
li:not(.hidden):first-child { }
/* Or with the newer "of" syntax: */
li:nth-child(1 of :not(.hidden)) { }

/* Table rows on hover, but not the header */
tr:not(:first-child):hover {
  background: #f0f7ff;
}

/* Style a form group when any field inside has focus */
.form-group:focus-within {
  border-color: blue;
  box-shadow: 0 0 0 3px rgba(0,0,255,0.1);
}

/* Cards that contain images AND are not the first card */
.card:has(img):not(:first-child) {
  margin-top: 2rem;
}