Sandbox

Sandbox is where i throw shit at the wall. not to see what sticks — to see what i like. no aesthetic obligation, no “does this fit the site” — just me testing technique for technique's sake. my HTML & CSS fundamentals live here too, unguided and untouched by the syllabus — and under them, my builds from The Odin Project. take it as the raw, unfiltered version of how i actually learn.

▸ HTML & CSS Fundamentals 16 builds · from scratch, no tutorial

▸ CSS Selectors

a full page — header, nav, cards, sidebar, footer — with every selector type wired into it: grouped, element, class, #id, descendant, direct child, and attribute selectors matching on href^="https", type="email" and [disabled]. the descendant and child rules paint different colors on purpose, so the gap between .card p and .card > p is something you see, not something you take on faith.

html

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Selectors Playground</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Selectors Playground</h1>
      <p>A tiny page for seeing CSS selectors in action.</p>
    </header>

    <nav aria-label="Main navigation">
      <a href="#articles">Articles</a> |
      <a href="https://developer.mozilla.org/">MDN reference</a>
    </nav>

    <div class="layout">
      <main id="articles">
        <h2>Featured Articles</h2>

        <section class="cards" aria-label="Article cards">
          <article class="card">
            <h3>Direct Child Paragraph</h3>
            <p>This direct child paragraph gets the green child-selector style.</p>
            <div>
              <p>This nested paragraph gets the blue descendant-selector style.</p>
            </div>
            <button id="cta">Read article</button>
          </article>

          <article class="card">
            <h3>Second Card</h3>
            <p>This is another direct child paragraph inside a card.</p>
            <button disabled>Coming soon</button>
          </article>
        </section>
      </main>

      <aside>
        <h2>Newsletter</h2>
        <p>Get one short CSS tip each week.</p>
        <label for="email">Email address</label>
        <input id="email" type="email" placeholder="you@example.com">
        <button>Subscribe</button>
      </aside>
    </div>

    <footer>
      <p>Built to explore CSS selectors.</p>
    </footer>
  </body>
</html>

css

styles.css

* {
  box-sizing: border-box;
}

body {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  background: #f6f8fb;
  color: #1f2937;
}

header,
nav,
main,
aside,
footer {
  padding: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  background: white;
}

nav,
footer {
  margin-top: 16px;
}

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.cards {
  display: grid;
  gap: 12px;
}

/* Group selector: targets every h1, h2, and h3 heading. */
h1,
h2,
h3 {
  color: #3730a3;
  border-bottom: 2px solid #c4b5fd;
}

/* Element selector: targets every paragraph on the page. */
p {
  color: #0f766e;
}

/* Class selector: targets every element with class="card". */
.card {
  padding: 14px;
  border: 3px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
}

/* ID selector: targets the one element with id="cta". */
#cta {
  border: 3px solid #db2777;
  background: #fce7f3;
  color: #9d174d;
}

/* Descendant selector: targets paragraphs anywhere inside a .card. */
.card p {
  background: #dbeafe;
  border-left: 5px solid #2563eb;
  padding: 6px;
}

/* Child selector: targets only paragraphs directly inside a .card. */
.card > p {
  background: #dcfce7;
  border-left-color: #16a34a;
  color: #166534;
}

/* Attribute selector: targets links whose href begins with "https". */
a[href^="https"] {
  color: #7c3aed;
  font-weight: bold;
}

/* Attribute selector: targets email input fields. */
input[type="email"] {
  border: 3px solid #0891b2;
  background: #ecfeff;
  padding: 8px;
}

/* Attribute selector: targets disabled buttons. */
button[disabled] {
  border: 2px dashed #64748b;
  background: #e2e8f0;
  color: #64748b;
}

button {
  padding: 8px 12px;
  border: 2px solid #1d4ed8;
  border-radius: 6px;
  background: #2563eb;
  color: white;
}

label,
input,
button {
  display: block;
  margin-top: 8px;
}

preview