Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 14: CSS Selectors — Deep Dive

🎨 Day 14: CSS Selectors — Deep Dive

Selectors are the heart of CSS — they let you target specific elements on the page and apply styles. Today we’ll cover every commonly-used selector, combinator, attribute selectors, pseudo-classes & pseudo-elements, and how specificity decides which rules win.

1) Basic selectors

  • Element selector — p { } targets all <p> elements.
  • Class selector — .btn { } targets elements with class="btn".
  • ID selector — #main { } targets the element with id="main".
  • Universal selector — * { } targets everything (use sparingly).
  • Group selector — h1, h2, p { } applies to multiple element types.
/* element */
p { color:#333; }

/* class */
.card { padding:12px; }

/* id */
#header { background:#fff; }

/* group */
h1,h2,h3 { margin:0 0 8px 0; }

2) Combinators (relationships)

Combinators define relationships between elements.

  • Descendant (space): nav a { } — any <a> inside <nav> (deep match).
  • Child (>): ul > li { } — direct children only.
  • Adjacent sibling (+): h2 + p { } — the <p> immediately after an <h2>.
  • General sibling (~): h2 ~ p { } — any <p> after an <h2> on same level.
/* descendant */
article p { line-height:1.6; }

/* child */
ul > li { list-style:none; }

/* adjacent sibling */
h2 + p { margin-top:0; }

/* general sibling */
h2 ~ ul { margin-top:8px; }

3) Attribute selectors

Select elements by attributes or values — very powerful for forms and components.

  • a[target="_blank"] { } — exact match
  • input[type="email"] { }
  • a[href^="https"] { } — starts with
  • img[alt] { } — elements that have the attribute
  • input[name$="email"] — ends with
  • [data-role~="primary"] — whitespace-separated token list
/* select anchors that open in new tab */
a[target="_blank"] { padding-right:6px; }

/* inputs that are required */
input[required] { border:2px solid #e65100; }

/* links starting with https */
a[href^="https"]::after { content: " ↗"; font-size:12px; opacity:0.7; }

4) Pseudo-classes (states) — :hover, :focus, :nth-child

Pseudo-classes target elements in a certain state or position.

  • :hover, :focus, :active
  • :first-child, :last-child, :nth-child(odd)
  • :not() — negation
/* hover */
a:hover { text-decoration:underline; }

/* nth child zebra */
.table tr:nth-child(even) { background:#fafafa; }

/* not selector */
button:not(.disabled) { cursor:pointer; }

5) Pseudo-elements — ::before, ::after, ::first-letter

Pseudo-elements let you style or insert content around elements.

.card::before {
  content: "★";
  margin-right:6px;
  color:gold;
}
p::first-letter { font-size:200%; font-weight:700; }

6) Specificity — how the browser decides which rule wins

When multiple rules target the same element, the browser uses specificity (and later order) to choose the winner. Think of specificity as a 4-part score:

(inline, ids, classes/attributes/pseudo-classes, elements/pseudo-elements)

Examples:

  • p → (0,0,0,1)
  • .intro p → (0,0,1,1)
  • #main .intro p → (0,1,1,1)
  • Inline style (e.g. style="color:...") → treated as (1,0,0,0) — highest (except !important).

Which wins? Compare tuples left-to-right. Higher number in first differing position wins.

/* rule A specificity (0,1,0,0) */
#nav a { color: red; }

/* rule B specificity (0,0,1,1) */
.nav .link a { color: blue; }

/* #nav a wins because it has an ID (second slot). */

7) Common pitfalls & tips

  • Avoid over-qualifying selectors (div.header h1) — prefer simple semantic classes (.header h1 or .site-title).
  • Prefer classes for reusable components (.btn, .card).
  • Use :focus styling to keep keyboard users visible focus states.
  • Use attribute selectors for behavior without extra classes (e.g., input[disabled]).

Try it yourself — live editor

Edit the code below and click Run Code. The demo shows many selectors (class, id, child, sibling, attribute, pseudo-classes, pseudo-elements) and specificity examples.


Practice Tasks

  1. Build a navigation and style: .nav > a for direct children, add :hover styles and show active state using a class.
  2. Create a table with alternating row colors using tr:nth-child(even/odd).
  3. Use attribute selectors to style all external links differently (a[href^="http"]).
  4. Write two rules that target the same element (class vs id) and predict which will win; then test in the editor.

Project of the Day

Create a small component library page: buttons, cards, form inputs — use semantic classes for each component (.btn, .card, .input) and add hover/focus states. Use attribute selectors for input[type="email"] to highlight email fields.

Comments

Post a Comment