CSS Smart Selectors & Pseudo Elements

Ebenezer Merdekiyos — Wed, 29 Oct 2025 05:10:59 +0000

🧩 1. Attribute Selectors

Select elements based on their attributes or attribute values.

💡 Syntax Examples:

input[type="text"] { ... }   /* exact match */
a[href^="https"] { ... }     /* starts with */
a[href$=".pdf"] { ... }      /* ends with */
a[href*="docs"] { ... }      /* contains */

🧠 Example:

<input type="text" placeholder="Name">
<input type="password" placeholder="Password">
<a href="https://example.com">Visit</a>
<a href="manual.pdf">Manual</a>

👉 Useful for styling forms, links, or any tag with attributes — no extra classes needed!

🪄 2. Pseudo-elements (::before, ::after)

Used to generate content or add decorations using CSS only.

💡 Syntax:

h2::before {
  content: "🌟 ";
}
a::after {
  content: " ↗";
}

🧠 Example:

<h2>Welcome</h2>
<a href="#">Learn more</a>

👉 Great for icons, labels, badges, or automatic quotes — adds personality to designs without extra HTML.

🖱️ 3. User Action Pseudo-classes

React to user interactions (hover, click, focus, etc.).

💡 Common ones:

button:hover { background: #2563eb; color: white; }  /* on hover */
input:focus { border-color: #10b981; }               /* when focused */
a:active { color: red; }                             /* when clicked */

🧠 Example:

<button>Hover me</button>
<input type="text" placeholder="Focus me">

👉 These make your website feel alive — interactive and dynamic.

👶 4. Child Combinator (>)

Targets only direct children of an element (not grandchildren).

💡 Syntax:

section > p {
  color: blue;
}

🧠 Example:

<section>
  <p>Direct child (styled)</p>
  <div>
    <p>Nested child (not styled)</p>
  </div>
</section>

👉 Helps you keep precise control over which elements get styled.

🧱 5. Structural Pseudo-classes

Select elements based on their position in the HTML structure.

💡 Syntax:

li:first-child { color: red; }
li:last-child { color: blue; }
p:only-child { font-style: italic; }

🧠 Example:

<ul>
  <li>First</li>
  <li>Middle</li>
  <li>Last</li>
</ul>

👉 Super handy for lists, tables, grids, and sections — no need for extra classes.

🚫 6. Negation Pseudo-class (:not())

Select everything except something specific.

💡 Syntax:

button:not(.primary) {
  background: gray;
}

🧠 Example:

<button class="primary">Save</button>
<button>Cancel</button>

👉 Styles all buttons except the one with the .primary class.
Perfect for excluding special elements from general styles.

🔢 7. Nth Pseudo-class (:nth-child() / :nth-of-type())

Select elements by their order number.

💡 Syntax:

li:nth-child(odd) { background: #f3f4f6; }  /* every odd item */
li:nth-child(even) { background: #e0f2fe; } /* every even item */
li:nth-child(3) { color: red; }             /* third item only */

🧠 Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

👉 Perfect for alternating row colors (like zebra stripes in tables).

✅ 8. Validity Pseudo-classes (:valid, :invalid, :required)

Used in forms to style inputs based on whether they’re valid or not.

💡 Syntax:

input:valid { border-color: #10b981; }
input:invalid { border-color: #ef4444; }
input:required { background: #fff7ed; }

🧠 Example:

<input type="email" placeholder="Enter email" required>

👉 Adds real-time visual feedback in forms — no JavaScript needed!

🔗 9. Relational Selector (:has())

Select elements based on what they contain.
(Modern browsers only — supported in Chrome, Edge, Safari, Firefox 121+)

💡 Syntax:

article:has(img) {
  border: 2px solid #2563eb;
}

🧠 Example:

<article>
  <img src="photo.jpg">
  <p>This article has an image.</p>
</article>

👉 Think of :has() as a “parent-aware” selector — CSS can now react to children!
(For example: “style any card that contains a button.”)

Forem: Ebenezer Merdekiyos

CSS Smart Selectors & Pseudo Elements

🧩 1. Attribute Selectors

🪄 2. Pseudo-elements (::before, ::after)

🖱️ 3. User Action Pseudo-classes

👶 4. Child Combinator (>)

🧱 5. Structural Pseudo-classes

🚫 6. Negation Pseudo-class (:not())

🔢 7. Nth Pseudo-class (:nth-child() / :nth-of-type())

✅ 8. Validity Pseudo-classes (:valid, :invalid, :required)

🔗 9. Relational Selector (:has())