📘 Lesson  ·  Lesson 04

CSS Selectors

CSS Selectors

What Selectors Do

A selector is the part BEFORE the curly braces — it answers "which elements should this style apply to?" This is where the id/class knowledge from your HTML course pays off: those attributes exist precisely so CSS can target elements. Master selectors and you can style exactly the elements you want, no more and no less. This is arguably the most important CSS skill.

The Basic Three — element, class, id

/* ELEMENT selector - all elements of that type */
p { color: gray; }              → every <p> on the page

/* CLASS selector - the dot . - reusable */
.btn { padding: 10px; }         → every element with class="btn"

/* ID selector - the hash # - unique */
#header { background: navy; }   → the ONE element with id="header"
SelectorSymbolTargets
Element(name)All tags of that type
Class.Elements with that class (reusable)
ID#The one element with that id (unique)

You already know from HTML that class is reusable and id is unique — now you see the CSS symbols that target them: dot for class, hash for id. These three cover most everyday styling.

Combining Selectors — narrowing down

/* Element WITH a class - element and class together, no space */
p.intro { font-size: 20px; }     → only <p> elements that have class="intro"

/* Multiple classes required - both must be present */
.btn.danger { color: red; }      → elements with BOTH btn and danger classes

/* Group - comma - apply to all listed */
h1, h2, h3 { color: navy; }      → all h1 OR h2 OR h3
The space vs no-space rule (crucial): p.intro (no space) means "a p that IS also .intro" — one element with both. p .intro (with space) means "a .intro INSIDE a p" — two different elements. This tiny space completely changes the meaning; it's the #1 selector confusion, cleared up in the next section.

Relationship Selectors — based on nesting

/* DESCENDANT (space) - anywhere inside */
nav a { color: white; }          → all <a> anywhere inside a <nav>

/* CHILD (>) - direct children only */
ul > li { margin: 5px; }         → only li that are DIRECT children of ul

/* ADJACENT SIBLING (+) - the next element right after */
h2 + p { margin-top: 0; }        → a p immediately following an h2
The most-used one is the descendant selector (space): nav a styles every link inside the navigation without touching links elsewhere. This is how you style "the buttons in the header" or "the links in the footer" specifically. The child selector > is stricter (direct children only, not grandchildren). Start with descendant; reach for > when you need precision.

Attribute and Universal Selectors

/* UNIVERSAL - everything */
* { margin: 0; }                        → every element (common reset)

/* ATTRIBUTE - by an attribute */
input[type="text"] { border: 1px solid; }   → text inputs only
a[target="_blank"] { color: green; }         → links opening in new tabs
[required] { border-left: 3px solid red; }   → any element with required

The universal selector * matches everything — most famously in a "reset" (* { margin: 0; padding: 0; }) to wipe browser default spacing before you build. Attribute selectors let you style by any attribute — perfect for forms, where you met input types: now you can style each type differently with pure CSS.

Exam Corner

Q: Symbols for class and id selectors? Class = . (dot), id = # (hash).

Q: Difference between p.intro and p .intro? No space = one element that is both p and .intro; with space = a .intro nested inside a p (descendant).

Q: What does the descendant selector (space) do? Selects elements nested anywhere inside another, e.g. nav a = all links inside nav.

Q: Difference between descendant (space) and child (>)? Space = any level deep; > = direct children only.

Q: What does the universal selector * select? Every element — often used for CSS resets.

Selectors क्या करते हैं

Selector curly braces से PEHLE का हिस्सा है — यह जवाब देता है "यह style किन elements पर लगे?" यहीं आपके HTML course का id/class ज्ञान काम आता है: वे attributes ठीक इसीलिए हैं ताकि CSS elements target कर सके. Selectors में महारत = आप ठीक वही elements style कर सकते हैं जो चाहें, न ज़्यादा न कम. यह शायद सबसे ज़रूरी CSS skill है.

मूल तीन — element, class, id

/* ELEMENT selector - us type ke saare elements */
p { color: gray; }              → page ke har <p>

/* CLASS selector - dot . - reusable */
.btn { padding: 10px; }         → class="btn" wale har element

/* ID selector - hash # - unique */
#header { background: navy; }   → id="header" wala EK element
SelectorSymbolTarget
Element(name)उस type के सारे tags
Class.उस class वाले elements (reusable)
ID#उस id वाला एक element (unique)

HTML से आप जानते हैं class reusable और id unique है — अब उन्हें target करने वाले CSS symbols देखिए: class के लिए dot, id के लिए hash. ये तीन ज़्यादातर रोज़ की styling cover करते हैं.

Selectors जोड़ना — छानना

/* Element WITH class - element aur class saath, bina space */
p.intro { font-size: 20px; }     → sirf wo <p> jinki class="intro" ho

/* Kai classes zaroori - dono honi chahiye */
.btn.danger { color: red; }      → jinme btn AUR danger dono classes ho

/* Group - comma - sab par lago */
h1, h2, h3 { color: navy; }      → saare h1 YA h2 YA h3
Space vs no-space rule (बेहद ज़रूरी): p.intro (बिना space) मतलब "एक p जो .intro भी HAI" — दोनों वाला एक element. p .intro (space के साथ) मतलब "p के ANDAR एक .intro" — दो अलग elements. यह नन्हा space पूरा अर्थ बदल देता है; यह #1 selector confusion है, अगले section में साफ.

Relationship Selectors — nesting के आधार पर

/* DESCENDANT (space) - kahin bhi andar */
nav a { color: white; }          → <nav> ke andar kahin bhi ke saare <a>

/* CHILD (>) - sirf seedhe children */
ul > li { margin: 5px; }         → sirf wo li jo ul ke SEEDHE children ho

/* ADJACENT SIBLING (+) - theek baad wala element */
h2 + p { margin-top: 0; }        → h2 ke turant baad aane wala p
सबसे ज़्यादा use होने वाला descendant selector (space) है: nav a navigation के अंदर के हर link को style करता है, बाकी links को छुए बिना. "header के buttons" या "footer के links" खास तौर पर ऐसे ही style करते हैं. Child selector > ज़्यादा सख्त है (सिर्फ direct children, grandchildren नहीं). Descendant से शुरू कीजिए; precision चाहिए तो >.

Attribute और Universal Selectors

/* UNIVERSAL - sab kuch */
* { margin: 0; }                        → har element (common reset)

/* ATTRIBUTE - kisi attribute se */
input[type="text"] { border: 1px solid; }   → sirf text inputs
a[target="_blank"] { color: green; }         → naye tab me khulne wale links
[required] { border-left: 3px solid red; }   → required wala koi bhi element

Universal selector * सब कुछ match करता है — सबसे मशहूर "reset" में (* { margin: 0; padding: 0; }) build से पहले browser का default spacing मिटाने को. Attribute selectors किसी भी attribute से style करने देते हैं — forms के लिए perfect, जहां आपने input types देखे: अब हर type को शुद्ध CSS से अलग style कर सकते हैं.

Exam Corner

Q: class और id selectors के symbols? Class = . (dot), id = # (hash).

Q: p.intro और p .intro में अंतर? बिना space = एक element जो p और .intro दोनों है; space के साथ = p के अंदर nested .intro (descendant).

Q: Descendant selector (space) क्या करता है? दूसरे के अंदर कहीं भी nested elements select करता है, जैसे nav a = nav के अंदर सारे links.

Q: Descendant (space) और child (>) में अंतर? Space = किसी भी level गहरा; > = सिर्फ direct children.

Q: Universal selector * क्या select करता है? हर element — अक्सर CSS resets में.
← Back to CSS Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.