CSS3 Course in Roman Hindi/Urdu - Beginner se Advanced Tak | Lecture 12: CSS3 Pseudo-Classes Advanced Full Guide (Yaar, Focus, Active, Not, Has Pseudo-Classes & Combinators Deep Dive with Specificity Tips – Full Deep Dive Se Samajh Aayega!)
Assalam-o-Alaikum yaar! Kya haal hai, dost? Pichli lecture mein variables aur custom properties seekh liye – themes switch, calc math se dynamic bana diya, sites ko smart coding! Ab targeting ka advanced level: CSS3 Pseudo-Classes Advanced! Yeh CSS3 ka precision tool hai – focus/active states, not/has for conditional, combinators deep (universal, :is), specificity tips se rules ladai jeet. Hum is lecture mein focus/visited/active, not/has/nth advanced, combinators (|| , :where), aur specificity deep ko full detail mein bataayenge – har ek ka use kya, kyun zaroori, kahan lagana, aur real examples ke saath, jaise tere saath sniper rifle leke target practice kar raha hoon. Tension mat le, step-by-step, code copy-paste se try karenge. Yeh seekh le toh selectors se tu sniper ban jaayega – exact elements hit, code clean!
Yaar, pseudo-classes 1999 se hain, lekin CSS3 advanced ne conditional power diya. Ready? Chal shuru!
CSS3 Pseudo-Classes Advanced Kya Hain? (Yaar, Overview – Kyun Aur Kab Use Karein)
Dost, Pseudo-Classes Advanced elements ke state/position par styles – :focus keyboard, :active press, :not exclude, :has parent check. Combinators selectors connect (space > + ~ ||). Use: Interactive/conditional styling. Why: Precise, less classes. Where: Forms, lists, nav. Example: input:focus { outline: 2px solid blue; } – keyboard highlight. :not(.active) { opacity: 0.5; } inactive dim. Without: JS hacks. Specificity: Advanced combinators low score. Responsive: :hover mobile :active replace.
Fun fact: :has 2022 se stable, parent selector revolution. Chalo types deep dive!
CSS3 Pseudo-Classes - Har Type Ka Full Explain (Use, Why, Where with Examples)
Yaar, 10+ advanced pseudo-classes, full details: use kya, kyun, kahan, example.
- :focus: Use: Focused element (keyboard/click). Why: Accessibility. Where: Inputs. Example: input:focus { border-color: blue; box-shadow: 0 0 5px rgba(0,123,255,0.5); } – blue glow on tab. Why: Screen readers.
input:focus { border-color: blue; box-shadow: 0 0 5px rgba(0,123,255,0.5); } - :active: Use: Active/press state. Why: Feedback. Where: Buttons. Example: button:active { transform: scale(0.95); background: darkblue; } – shrink on click. Why: Touch confirm.
button:active { transform: scale(0.95); background: darkblue; } - :visited: Use: Visited links. Why: History hint. Where: Nav. Example: a:visited { color: purple; } Visited Purple – history change. Privacy: Limited styles.
a:visited { color: purple; } - :not(): Use: Exclude selector. Why: Conditional. Where: Lists. Example: li:not(.done) { text-decoration: line-through; }
li:not(.done) { text-decoration: line-through; }- Done
- Not Done (Strikethrough)
- :has(): Use: Parent if child match. Why: Contextual. Where: Articles. Example: article:has(h2) { border-left: 4px solid green; }
article:has(h2) { border-left: 4px solid green; }Has H2 (Green Border)
No H2 – parent style. Why: No JS check. - :is(): Use: Multiple selectors shorthand. Why: Short code. Where: Complex. Example: :is(h1, h2, h3) { color: blue; } – all headings blue. Specificity min. Why: Clean.
:is(h1, h2, h3) { color: blue; } - :where(): Use: Like :is but zero specificity. Why: Non-overriding. Where: Base styles. Example: :where(.container p) { margin: 1em; } – low priority.
- :nth-child(n): Use: Position select. Why: Patterns. Where: Tables. Example: tr:nth-child(even) { background: #f0f0f0; } Zebra stripes. n+1 first, 2n even.
tr:nth-child(even) { background: #f0f0f0; }
Yaar Tip: :has powerful but browser support 90%+, fallback class. :focus-visible keyboard only.
Combinators Deep Dive - Advanced Relations (|| , :where with Examples)
Dost, combinators selectors connect – advanced 2, details.
- Column Combinator (||): Use: Column-based (tables/grid). Why: Data rows. Where: Tables. Example: col|| td:nth-child(odd) { background: #eee; } Odd columns stripe. Why: Table patterns.
col || td:nth-child(odd) { background: #eee; } - Nesting Combinators: Use: Deep nesting shorthand (experimental). Why: Readable. Where: Future CSS. Example: .parent { & .child { color: red; } } – compiles to .parent .child.
Specificity Tips: Advanced low score (:not 10, :has 10). :where 0, override easy. Cascade layers @layer base { } – order control.
Yaar Tip: Combinators with pseudo: li:not(:last-child) { border-bottom: 1px solid; } – all but last.
Apna Pehla Pseudo-Advanced Project (Yaar, Hands-On – Step-by-Step with Fixes)
Dost, ab banao interactive form pseudo se!
Step 1: Setup
Folder "Pseudo-Advanced-Project". Files: index.html, pseudo.css. Live Server.
Step 2: Code Likh (Full with Why)
pseudo.css:
/* Pseudo-Classes */
input:focus {
outline: none;
border-color: var(--primary, blue);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* Ring */
}
button:active {
transform: translateY(1px);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Pressed */
}
a:visited {
opacity: 0.7;
}
li:not(.complete) {
text-decoration: line-through;
}
article:has(.featured) {
border-left: 5px solid green;
background: #f0fff0;
}
/* Advanced Pseudo */
:is(h1, h2):where(.highlight) {
color: red;
font-weight: bold;
}
tr:nth-child(odd):has(td:empty) {
background: yellow; /* Odd row with empty cell */
}
/* Combinators Deep */
col || td:first-child {
font-weight: bold;
}
/* Specificity Test */
.base { color: black; } /* 10 */
.specific .base { color: green; } /* 20 */
#high .specific .base { color: blue; } /* 110 */
/* Responsive */
@media (prefers-reduced-motion: no-preference) {
button:focus { animation: focus-ring 0.3s; }
}index.html:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Advanced Demo - Lecture 12</title>
<link rel="stylesheet" href="pseudo.css">
</head>
<body>
<h1 class="highlight">Highlight H1 (:is + :where)</h1> <!-- Red bold -->
<h3>Normal H3</h3>
<form>
<input type="text" placeholder="Focus for Ring">
<button>Active Press Me</button>
</form>
<ul>
<li class="complete">Complete Task</li>
<li>Incomplete Task (Strikethrough :not)</li>
</ul>
<article class="has-featured">
<p>Article with featured content (Green Border :has)</p>
<div class="featured">Featured Div</div>
</article>
<table>
<col><col><col>
<tr><td>Bold First</td><td>Normal</td><td>Normal</td></tr>
<tr><td>Empty Odd Row (Yellow)</td><td></td><td>Normal</td></tr>
</table>
<a href="#">Visited Link (Opacity)</a>
</body>
</html>Yaar, Yeh Kaise Kaam Karta? H1 :is/:where red, input focus ring, button active press, li :not strikethrough, article :has green, table col|| bold first, tr :nth-child:has(empty) yellow, a:visited dim. Test: Tab focus ring, click active shrink. Mistakes: :has support? Fallback class. Specificity high? Low combinators use.
Step 3: Test aur Tweak (Dost Help)
1. Save, refresh – focus tab? 2. Inspect: Styles panel pseudo show. 3. Tweak: :not(.no-focus) input { outline: auto; } conditional. Table data add test. Issue: :has no? JS polyfill.
Practice Tasks (Yaar, Challenges – Level Up Kar)
- Easy (10 Min): Code copy, button:active background darker, test press. (Use: Feedback.)
- Medium (15 Min): List :not(:last-child) border-bottom add all but last.
- Advanced (20 Min): Article :has(img) full-width image, :where(section p) margin 0.
Dost Challenge: Ek form banao :focus-visible only keyboard ring, :active all taps. :has(label) input group style. Screenshot!
Common Questions (Yaar, Sab Clear – FAQ Dost Style)
- Q1: :focus vs :focus-visible?
- A: :focus all (mouse/keyboard), :focus-visible keyboard only (reduce clutter). Use visible accessibility.
- Q2: :not multiple exclude?
- A: :not(.class1.class2) or :not(.class1):not(.class2). Nested no.
- Q3: :has performance?
- A: Slight slow (recalc), but modern ok. Limit use.
- Q4: Combinators || table only?
- A: Mostly tables, but grid too. :where low spec.
- Q5: Specificity :is/:where?
- A: :is max child spec, :where 0 (base).
Next Lecture Teaser
Yaar, agla utility: CSS3 Utility Classes & Frameworks Intro (Tailwind-like, CSS-in-JS Teaser). Pseudo practice kar, utilities fast lagega. Comment bata kaisa tha – saath hain!
Course Outline Hint: - L1: Basic Intro - L2: Advanced Selectors - L3: Box Model - L4: Flexbox - L5: Grid - L6: Animations - L7: Transforms - L8: Colors/Backgrounds - L9: Typography - L10: Responsive - L11: Variables - L12: Pseudo Advanced (Yeh) - ... L20: Projects.
Doubts ho toh bol, dost. Allah Hafiz! Pseudo master kar le. 😊
