آموزش کامل سلکتورهای CSS (مرجع جامع)
این جلسه ادامه دوره کامل آموزش CSS آوای وبه. توی این مقاله قراره کامل و جامع درباره سلکتورهای CSS صحبت کنیم؛ تو جلسه سوم فهمیدیم هر قانون CSS از Selector، Property و Value تشکیل میشه، و حالا وقتشه بفهمیم خود سلکتور دقیقاً چیه و چند مدل داره.
آنچه در این مقاله می‌خوانید:
یه سلکتور رو مثل آدرس‌دادن به یه پیک تصور کن. اگه فقط بگی «برو یه بسته تحویل بده»، پیک نمی‌دونه کجا بره. ولی اگه بگی «برو خیابون X، پلاک Y»، دقیق می‌دونه کجا باید بره. سلکتور CSS هم دقیقاً همین کارو با مرورگر میکنه: بهش آدرس دقیق المانی که می‌خوای استایل بدی رو می‌ده.
🎯 اهداف یادگیری این جلسه
- سلکتورهای پایه (Element، Class، ID، Universal) رو با مثال کامل بفهمی
- با Combinatorها رابطه بین عناصر تو در تو رو هدف بگیری
- با Attribute Selectorها عناصر رو بر اساس ویژگی‌هاشون انتخاب کنی
- فرق Pseudo-class و Pseudo-element رو کامل بفهمی
- با Logical Selectorهای مدرن (
:is,:where,:not,:has) آشنا بشی - یاد بگیری چرا بعضی وقتا استایلت اعمال نمی‌شه (Specificity)
🧱 سلکتورهای پایه (Basic Selectors)
این‌ها ساده‌ترین و پرکاربردترین سلکتورها هستن؛ تقریباً تو هر پروژه ازشون استفاده میکنی.
1. Element Selector — انتخاب بر اساس نوع تگ
این سلکتور همه‌ی المان‌هایی که یه تگ خاص دارن رو، بدون توجه به کلاس یا آیدیشون، انتخاب میکنه. فقط کافیه اسم تگ رو بدون هیچ علامتی بنویسی:
p {
color: crimson;
}حالا این HTML رو در نظر بگیر:
<p>این پاراگراف قرمز میشه.</p>
<p>این یکی هم قرمز میشه.</p>
<span>ولی این تغییر نمیکنه، چون span نیست.</span>نتیجه: هر دو تگ <p> قرمز می‌شن، ولی <span> دست‌نخورده می‌مونه، چون سلکتور فقط رو تگ p اثر میذاره.
2. Class Selector — انتخاب بر اساس کلاس
وقتی می‌خوای فقط بعضی از المان‌ها (نه همه‌ی یه نوع تگ) رو استایل بدی، از کلاس استفاده میکنی. تو HTML با اتریبیوت class یه برچسب به عنصر می‌زنی، و تو CSS با یه نقطه (.) قبل اسمش صداش میکنی:
.highlight {
background-color: yellow;
}<p class="highlight">این پاراگراف پس‌زمینه زرد داره.</p>
<p>این یکی معمولی می‌مونه.</p>
<div class="highlight">این div هم زرد میشه.</div>نتیجه: فقط عناصری که دقیقاً class="highlight" دارن (چه پاراگراف باشن چه div) زرد می‌شن؛ نوع تگ اهمیتی نداره، فقط داشتن اون کلاس مهمه. این بزرگ‌ترین تفاوتش با Element Selectorه: کلاس رو خودت با اراده به هر تگی که بخوای می‌چسبونی.
3. ID Selector — انتخاب یه عنصر منحصربه‌فرد
وقتی فقط و فقط یه عنصر خاص و یکتا تو کل صفحه می‌خوای استایل بدی (مثلاً هدر اصلی سایت)، از ID استفاده میکنی. با # شروع میشه:
#site-header {
background-color: #222;
color: white;
}<header id="site-header">این هدر پس‌زمینه تیره می‌گیره.</header>قانون مهم: یه id فقط باید یه‌بار تو کل صفحه HTML استفاده بشه (برخلاف class که میتونه چندین‌بار تکرار بشه). به همین دلیل، ID بیشتر برای هدف‌گیری با جاوااسکریپت یا لنگر (Anchor Link) مثل #faq کاربرد داره، نه استایل‌دهی عمومی — چون Specificity بالاش باعث میشه بعداً overrideکردنش سخت بشه (این موضوع رو پایین همین مقاله کامل توضیح می‌دیم).
4. Universal Selector — انتخاب همه چیز
با * نشون داده میشه و همه‌ی عناصر صفحه رو، بدون استثنا، انتخاب میکنه:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}کاربرد واقعی: معمولاً در ابتدای هر پروژه برای «ریست کردن» فاصله‌های پیش‌فرضی که خود مرورگر به تگ‌ها می‌ده (مثل margin پیش‌فرض <body> یا <h1>) استفاده میشه، تا همه‌چیز از صفر و تحت کنترل خودت شروع بشه.
5. Grouping Selector — گروه‌بندی چند سلکتور با کاما
وقتی چند سلکتور مختلف قراره یه استایل مشترک بگیرن، به‌جای تکرار کد، با کاما گروه‌شون میکنی:
h1, h2, h3, .title {
font-family: "Vazirmatn", sans-serif;
}نتیجه: هر عنصری که h1، h2، h3 باشه یا کلاس title داشته باشه، همون فونت رو می‌گیره — بدون اینکه مجبور باشی چهار بار همون font-family رو بنویسی.
🧭 Combinatorها — هدف گرفتن عناصر تو در تو
تا اینجا یاد گرفتی چطور یه عنصر رو مستقیم انتخاب کنی. ولی خیلی وقت‌ها می‌خوای بر اساس رابطه‌ی یه عنصر با عنصر دیگه (مثلاً «فقط پاراگراف‌هایی که داخل این باکس هستن») انتخاب کنی. این کار Combinatorهاست.
1. Descendant Combinator (فاصله) — هر سطح از تودرتویی
وقتی بین دو سلکتور فقط یه فاصله می‌ذاری، یعنی «هر جای داخل این عنصر، در هر عمقی»:
.card p {
color: gray;
}<div class="card">
<p>این خاکستری میشه (فرزند مستقیم).</p>
<section>
<p>این هم خاکستری میشه (نوه‌ست، ولی بازم داخل card).</p>
</section>
</div>
<p>این خاکستری نمی‌شه، چون بیرون از card هست.</p>نتیجه: هر دو <p> داخل .card خاکستری می‌شن — فرقی نمیکنه یه سطح تو در تو باشن یا ده سطح؛ فقط مهمه که یه‌جایی داخل .card باشن.
2. Child Combinator (>) — فقط فرزند مستقیم
اگه بخوای دقیق‌تر باشی و فقط فرزندهای بی‌واسطه رو هدف بگیری (نه نوه‌ها)، از > استفاده میکنی:
.card > p {
color: orange;
}<div class="card">
<p>این نارنجی میشه (فرزند مستقیمه).</p>
<section>
<p>این نارنجی نمی‌شه! چون فرزند sectionه، نه card.</p>
</section>
</div>فرقش با Descendant: اینجا فقط اولین <p> رنگی میشه، چون دومی یه سطح عمیق‌تر (داخل section) قرار داره. این دقیق‌ترین راه برای کنترل کامل روی «چه کسی مستقیم فرزند کیه».
3. Adjacent Sibling Combinator (+) — همسایه بلافصل بعدی
این یکی رابطه‌ی «خواهر/برادری» رو هدف می‌گیره، نه پدر/فرزندی. فقط اولین عنصری که بلافاصله بعد از یه عنصر خاص، در همون سطح، میاد رو انتخاب میکنه:
h2 + p {
font-weight: bold;
}<h2>عنوان</h2>
<p>این بولد میشه، چون درست بعد از h2 اومده.</p>
<p>این بولد نمی‌شه، چون بعد از پاراگراف اومده نه h2.</p>کاربرد واقعی: مثلاً وقتی می‌خوای فقط اولین پاراگراف بعد از هر تیتر یه استایل خاص (مثل فونت درشت‌تر برای مقدمه) بگیره.
4. General Sibling Combinator (~) — همه همسایه‌های بعدی
شبیه بالاییه، ولی به‌جای فقط اولی، همه‌ی عناصر هم‌سطح بعدی رو انتخاب میکنه:
h2 ~ p {
color: teal;
}<h2>عنوان</h2>
<p>این فیروزه‌ای میشه.</p>
<div>این یه divه، تاثیری نمی‌گیره.</div>
<p>این هم فیروزه‌ای میشه، چون بازم بعد از h2 و هم‌سطحشه.</p>نکته مهم: اینجا برخلاف +، هر دو پاراگراف رنگی می‌شن — حتی با وجود اینکه یه <div> بینشون فاصله انداخته، چون هنوز «بعد از h2» و «هم‌سطح با h2» حساب می‌شن.
📊 جدول مقایسه سریع Combinatorها
| نماد | اسم | چی رو انتخاب میکنه |
|---|---|---|
| (فاصله) | Descendant | همه‌ی نسل‌ها، در هر عمقی |
> | Child | فقط فرزند مستقیم |
+ | Adjacent Sibling | فقط همسایه بلافصل بعدی |
~ | General Sibling | همه همسایه‌های بعدی |
🏷️ Attribute Selector — انتخاب بر اساس ویژگی HTML
این سلکتورها بهت اجازه می‌دن عناصر رو بر اساس وجود یا مقدار یه attribute (ویژگی HTML، مثل href یا type) هدف بگیری — بدون نیاز به کلاس یا آیدی اضافه.
1. وجود ساده یه ویژگی: [attr]
a[href] {
color: royalblue;
}<a href="https://avayweb.com">این آبی میشه.</a>
<a>این آبی نمی‌شه، چون href نداره.</a>2. مقدار دقیقاً برابر: [attr="value"]
input[type="email"] {
border: 2px solid green;
}<input type="email"> <!-- حاشیه سبز می‌گیره -->
<input type="text"> <!-- تغییری نمیکنه -->3. شامل یک کلمه‌ی خاص (جدا با فاصله): [attr~="value"]
a[class~="external"] {
color: crimson;
}<a class="link external">این قرمز میشه.</a>
<a class="externallink">این قرمز نمی‌شه! چون external یه کلمه‌ی جدا نیست.</a>نکته: این با «شامل زیررشته بودن» فرق داره — اینجا باید external دقیقاً یکی از کلمات جدا‌شده با فاصله باشه، نه بخشی از یه کلمه بزرگ‌تر.
4. شروع با یه رشته خاص: [attr^="value"]
a[href^="https"] {
color: orange;
}<a href="https://avayweb.com">این نارنجی میشه.</a>
<a href="mailto:[email protected]">این نارنجی نمی‌شه.</a>5. پایان با یه رشته خاص: [attr$="value"]
a[href$=".pdf"] {
color: crimson;
}<a href="/files/guide.pdf">این قرمز میشه (لینک دانلود PDF).</a>
<a href="/files/guide.docx">این قرمز نمی‌شه.</a>کاربرد واقعی خیلی رایج: نشون دادن یه آیکون کنار لینک‌های دانلود، بدون نیاز به کلاس دستی روی هرکدوم.
6. شامل یه زیررشته در هر جای مقدار: [attr*="value"]
a[href*="avayweb"] {
font-weight: bold;
}<a href="https://avayweb.com/css">این بولد میشه.</a>
<a href="https://google.com">این بولد نمی‌شه.</a>برخلاف ^= و $=، اینجا مهم نیست رشته کجای مقدار باشه — فقط باید یه‌جایی توش پیدا بشه.
🎭 Pseudo-class — انتخاب بر اساس حالت
تا اینجا همه‌ی سلکتورها بر اساس ساختار HTML عمل می‌کردن (چه تگی، چه کلاسی، چه رابطه‌ای). ولی گاهی می‌خوای بر اساس یه حالت موقت استایل بدی — مثلاً وقتی کاربر موس رو روی یه دکمه می‌بره. اینجاست که Pseudo-class وارد میشه. همیشه با یه : شروع میشه.
1. حالت‌های تعاملی (Interactive States)
button {
background-color: royalblue;
color: white;
}
button:hover {
background-color: darkblue;
}
button:active {
background-color: navy;
}<button>روی من موس ببر!</button>نتیجه: دکمه با رنگ آبی معمولی نمایش داده میشه؛ وقتی موس روش می‌ری (:hover) رنگش تیره‌تر میشه؛ و لحظه‌ای که کلیکش میکنی (:active) رنگش از اون هم تیره‌تر میشه. این سه حالت با هم یه فیدبک بصری کامل به کاربر می‌دن.
برای فرم‌ها هم :focus خیلی مهمه — وقتی کاربر رو یه input کلیک یا با Tab وارد میشه:
input:focus {
outline: 2px solid royalblue;
border-color: royalblue;
}این کار هم برای UX خوبه هم برای دسترس‌پذیری حیاتیه — کاربرانی که با کیبورد navigate می‌کنن باید دقیق ببینن الان رو کدوم فیلد هستن.
2. Pseudo-classهای ساختاری (Structural)
این‌ها بر اساس موقعیت یه عنصر بین خواهر و برادرهاش عمل می‌کنن:
li:first-child {
font-weight: bold;
}
li:last-child {
color: crimson;
}
li:nth-child(odd) {
background-color: #f5f5f5;
}<ul>
<li>مورد اول (بولد میشه)</li>
<li>مورد دوم (پس‌زمینه خاکستری نداره، چون زوجه)</li>
<li>مورد سوم (پس‌زمینه خاکستری داره، چون فرده)</li>
<li>مورد چهارم (قرمز میشه، چون آخرین عضوه)</li>
</ul>نکته مهم درباره :nth-child(odd): این دقیقاً یعنی «هر عضوی که موقعیتش فرد باشه» (اول، سوم، پنجم…). برای زوج‌ها از :nth-child(even) استفاده میکنی. این تکنیک خیلی برای رنگی کردن ردیف‌های متناوب جدول یا لیست (Zebra Striping) استفاده میشه.
فرق مهم :nth-child با :nth-of-type:
<div>
<h2>عنوان</h2>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
</div>p:first-child {
color: red;
} /* هیچ اثری نداره! چون اولین فرزند این div، h2 هست نه p */
p:first-of-type {
color: blue;
} /* پاراگراف اول رو آبی میکنه، چون اولین "از نوع p" همینه */این یکی از رایج‌ترین اشتباهات مبتدی‌هاست: :first-child فقط وقتی کار میکنه که عنصر واقعاً اولین فرزند والدش باشه (بدون توجه به نوع تگش)، ولی :first-of-type فقط بین عناصر همنوع میشماره.
3. Pseudo-classهای فرم
input:required {
border-left: 3px solid crimson;
}
input:disabled {
background-color: #eee;
cursor: not-allowed;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}<input type="email" required>نتیجه: این input هم خط قرمز سمت چپ می‌گیره (چون requiredه)، و هم به‌محض اینکه کاربر یه ایمیل معتبر بنویسه، حاشیه‌اش سبز میشه؛ اگه چیزی غیرمعتبر (مثلاً بدون @) بنویسه، حاشیه قرمز می‌مونه — همه‌ی این‌ها بدون یه خط جاوااسکریپت!
✂️ Pseudo-element — انتخاب بخشی از یه عنصر
برخلاف Pseudo-class که یه «حالت» رو هدف می‌گیره، Pseudo-element یه «تکه» از عنصر رو هدف می‌گیره که در HTML اصلاً وجود نداره — CSS خودش مجازی می‌سازتش. همیشه با :: (دو نقطه) شروع میشه.
1. ::before و ::after
blockquote::before {
content: "« ";
color: gray;
font-size: 1.5em;
}
blockquote::after {
content: " »";
color: gray;
font-size: 1.5em;
}<blockquote>CSS یاد گرفتن راحتتر از چیزیه که فکر میکنی!</blockquote>نتیجه: بدون اینکه هیچ کاراکتری تو HTML اضافه کنی، مرورگر خودش قبل و بعد از متن یه گیومه‌ی تزئینی نشون می‌ده. این تکنیک خیلی برای آیکون‌ها، گیومه‌ها و علائم تزئینی استفاده میشه.
2. ::first-line و ::first-letter
p::first-letter {
font-size: 2em;
font-weight: bold;
color: crimson;
}
p::first-line {
font-weight: bold;
}کاربرد واقعی: این دقیقاً همون افکت «حرف بزرگ ابتدای پاراگراف» (Drop Cap) هست که تو مجله‌ها و کتاب‌ها می‌بینی — بدون نیاز به یه span دستی دور حرف اول.
3. ::selection
::selection {
background-color: gold;
color: black;
}نتیجه: وقتی کاربر با موس یه بخش از متن سایتت رو انتخاب (Select) میکنه، به‌جای رنگ آبی پیش‌فرض مرورگر، پس‌زمینه‌ی زرد و متن سیاه می‌بینه — یه جزئیات ریز که حس برندینگ حرفه‌ای می‌ده.
⚠️ خلاصه فرق Pseudo-class و Pseudo-element
| Pseudo-class | Pseudo-element | |
|---|---|---|
| نشانه | یه : | دو :: |
| چی رو هدف می‌گیره | یه حالت (State) | یه بخش مجازی |
| مثال | :hover, :nth-child() | ::before, ::first-letter |
🧠 Logical Pseudo-classes — سلکتورهای منطقی مدرن
این‌ها جدیدترین و قدرتمندترین ابزارهای انتخاب تو CSS هستن. به‌جای اینکه مجبور باشی سلکتورهای طولانی و تکراری بنویسی، این‌ها بهت اجازه می‌دن با منطق ساده («این یا اون»، «همه به‌جز این») کار کنی.
1. :not() — همه به‌جز…
p {
color: gray;
}
p:not(.highlight) {
opacity: 0.7;
}<p class="highlight">این کدر نمی‌شه (کلاس highlight داره).</p>
<p>این کدر میشه، چون highlight نداره.</p>ترجمه فارسی این کد: «همه پاراگراف‌ها رو انتخاب کن، به‌جز اونایی که کلاس highlight دارن.» این خیلی بهتر از اینه که برای هر پاراگراف معمولی یه کلاس جدا بنویسی.
2. :is() — کوتاه‌نویسی هوشمند برای OR
فرض کن می‌خوای تو یه کارت، هر سه تیتر h1، h2، h3 یه فاصله پایین مشترک داشته باشن. بدون :is() باید این‌طوری بنویسی:
.card h1,
.card h2,
.card h3 {
margin-bottom: 10px;
}با :is() همون کارو خیلی کوتاه‌تر انجام می‌دی:
.card :is(h1, h2, h3) {
margin-bottom: 10px;
}هر دو کد دقیقاً یه نتیجه می‌دن، ولی نسخه دوم کوتاه‌تر و وقتی سلکتور بیرونی (.card) پیچیده‌تر بشه، خیلی خواناتره.
3. :where() — مثل :is() ولی بدون وزن
:where(header, footer, main) p {
margin: 0;
padding: 0;
}
/* بعداً همین یه کلاس ساده میتونه overrideش کنه */
.intro {
margin: 20px;
}چرا این مهمه؟ اگه به‌جای :where() از :is() استفاده می‌کردی، چون :is() وزن (Specificity) داره، ممکن بود بعداً override کردنش با یه کلاس ساده سخت بشه. :where() عمداً «صفر وزن» طراحی شده، دقیقاً برای همچین سناریوهایی — مثل ریست کردن استایلهای پایه یه پروژه، جایی که می‌خوای بعداً هرکسی راحت بتونه روش استایل بذاره.
4. :has() — سلکتور پدر (Parent Selector)
این شاید مهم‌ترین و انقلابی‌ترین سلکتور جدید CSS باشه. تا قبل از این، CSS هیچ راهی نداشت که بر اساس فرزندهای یه عنصر، خود اون عنصر (والد) رو انتخاب کنه — این کار همیشه نیاز به جاوااسکریپت داشت.
.form-group {
border: 1px solid #ccc;
padding: 10px;
}
.form-group:has(input:invalid) {
border-color: crimson;
background-color: #fff0f0;
}<div class="form-group">
<label>ایمیل:</label>
<input type="email" value="not-an-email">
</div>ترجمه فارسی: «اگه این .form-group شامل یه input نامعتبر بود، خودش رو با حاشیه و پس‌زمینه قرمز نشون بده.» به‌محض اینکه کاربر یه ایمیل معتبر بنویسه، والد خودش‌به‌خود به حالت عادی برمی‌گرده — همه‌ی این‌ها فقط با CSS، بدون هیچ خط جاوااسکریپت.
⚠️ نکته مهم::has() از نظر پردازشی سنگینتر از بقیه سلکتورهاست، چون مرورگر باید همه‌ی فرزندهای احتمالی رو چک کنه. تو پروژههای بزرگ، شرطهاش رو ساده نگه دار و همهجا ازش استفاده نکن.
📊 جدول مقایسه Logical Selectors
| سلکتور | کاربرد | وزن (Specificity) |
|---|---|---|
:not() | انتخاب همه به‌جز یک مورد | متوسط |
:is() | کوتاه‌نویسی OR بین چند سلکتور | وزن قوی‌ترین آرگومان داخلش |
:where() | مثل :is() ولی برای ریستها | صفر (بدون وزن) |
:has() | انتخاب والد بر اساس فرزند | وزن قوی‌ترین آرگومان داخلش |
⚖️ Specificity به زبون ساده (با مثال عددی)
گاهی چند قانون CSS مختلف همزمان می‌خوان رو یه عنصر اثر بذارن. مرورگر باید تصمیم بگیره کدوم برنده میشه — این تصمیم بر اساس Specificityه، یعنی هرچی سلکتور «خاص‌تر» باشه، اولویتش بالاتره.
یه روش ساده برای محاسبه: به هر نوع سلکتور یه امتیاز بده و جمعشون کن:
- Element Selector (مثل
p) → ۱ امتیاز - Class، Attribute، Pseudo-class (مثل
.card,[type],:hover) → ۱۰ امتیاز - ID Selector (مثل
#main) → ۱۰۰ امتیاز - Inline Style (مستقیم رو تگ) → ۱۰۰۰ امتیاز
حالا این مثال رو ببین:
p {
color: blue;
} /* امتیاز: 1 */
.text {
color: green;
} /* امتیاز: 10 */
#intro {
color: red;
} /* امتیاز: 100 */<p class="text" id="intro">این متن چه رنگی میشه؟</p>جواب: قرمز! چون #intro با امتیاز ۱۰۰ از .text (امتیاز ۱۰) و p (امتیاز ۱) برنده میشه — فارغ از اینکه کدوم قانون اول یا آخر تو فایل CSS نوشته شده.
نکته: ترتیب نوشتن فقط وقتی مهمه که Specificity برابر باشه. اگه دو تا قانون امتیاز یکسان داشته باشن، اون که پایین‌تر تو فایل نوشته شده برنده میشه.
🧪 تمرین جامع این جلسه
این HTML رو بساز:
<div class="card">
<h2>عنوان کارت</h2>
<p>پاراگراف اول</p>
<p class="note">پاراگراف دوم (یادداشت)</p>
<label>ایمیل:</label>
<input type="email" required>
</div>حالا با CSS این کارها رو انجام بده:
- با
.card > pفقط پاراگراف‌های فرزند مستقیم کارت رو یه رنگ بده - با
:not()پاراگرافی که کلاسnoteنداره رو کمی شفاف‌تر (opacity) کن - با
:has()اگه input داخل کارت نامعتبر بود، کل کارت حاشیه قرمز بگیره - با
::first-letterحرف اول پاراگراف اول رو بزرگ و پررنگ کن
بعد از نوشتن، سعی کن پیش‌بینی کنی هر بخش چه رنگی میشه، قبل از اینکه تو مرورگر تستش کنی — این بهترین راه برای عمیق یاد گرفتن Specificity و Combinatorهاست.
❓ سوالات متداول
فرق :first-child و :first-of-type چیه؟
:first-child فقط وقتی کار میکنه که عنصر واقعاً اولین فرزند والدش باشه (بدون توجه به نوع تگ). :first-of-type فقط بین عناصر همنوع میشماره، حتی اگه قبلش تگهای دیگهای باشن.
فرق :is() و :where() چیه؟
از نظر انتخاب المان دقیقاً یکی هستن؛ فرقشون در وزنه — :where() هیچ Specificity اضافه نمیکنه، برای همین راحتتر توسط استایلهای دیگه override میشه، و بیشتر برای ریستها و استایلهای پایه استفاده میشه.
آیا استفاده زیاد از :has() مشکلساز میشه؟
میتونه؛ چون از نظر پردازشی سنگینتر از سلکتورهای معمولیه. تو پروژههای بزرگ بهتره شرطهاش رو ساده نگه داری و همهجا ازش استفاده نکنی.
آیا انتخاب نوع سلکتور روی سئو تاثیر داره؟
نه بهصورت مستقیم؛ نوع سلکتوری که انتخاب میکنی به خودی خود فاکتور رتبهبندی گوگل نیست. چیزی که واقعاً روی سئو اثر میذاره، عملکرد کلی صفحه (حجم و سرعت لود CSS) و ساختار HTML سمانتیکه، نه نوع سلکتور CSS.
🔍 نکته‌ای درباره سلکتورهای مدرن
سلکتورهایی مثل :has()، :where() و @scope نسبتاً جدید هستن، ولی خوشبختانه امروز اکثر مرورگرهای اصلی ازشون پشتیبانی می‌کنن. با این حال، یه عادت حرفه‌ای خوب اینه که قبل از تکیه‌ی زیاد رو یه ویژگی جدید تو یه پروژه حساس، مطمئن بشی مرورگرهای هدف مخاطبت (مثلاً اگه پروژه‌ت کاربر سازمانی با مرورگر قدیمی داره) ازش پشتیبانی می‌کنن. تو جلسات بعدی، وقتی به ابزارها و گردش‌کار حرفه‌ای می‌رسیم، این موضوع رو دقیق‌تر باز می‌کنیم.
🎯 جمع‌بندی و قدم بعدی
حالا یه مرجع کامل از سلکتورهای CSS داری: از پایه‌ای‌ها گرفته تا Combinator، Attribute Selector، Pseudo-class/element، Logical Selectorهای مدرن مثل :has()، و حتی یاد گرفتی چطور Specificity رو با عدد محاسبه کنی. این‌ها ابزارهایی هستن که هر روز تو کدنویسی واقعی ازشون استفاده میکنی. جلسه بعد می‌ریم سراغ Box Model — یعنی می‌فهمیم مرورگر دقیقاً چطور فضای هر عنصر رو محاسبه میکنه.
جلسه پنجم: آموزش کامل Box Model در CSS ←
💬 نوبت توئه!
کدوم بخش این مقاله برات جدید بود؟ تمرین بالا رو انجام دادی؟ همین پایین برامون بنویس، تیم آوای وب همیشه اینجاست 🚀
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب بهصورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.