CSS Smart Selectors & Pseudo Elements

🧩 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:

👉 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:

Welcome
Learn more

👉 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:

👉 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:

  
Direct child (styled)
  

    
Nested child (not styled)
  

👉 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:

👉 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:

Save
Cancel

👉 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:

  
Item 1
  
Item 2
  
Item 3
  
Item 4

👉 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:

👉 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:

  
  
This article has an image.

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