در حال بارگذاری...

ترکیب‌کننده‌های CSS

از قبل بلد هستید با سلکتور type و class و id عنصر را هدف بگیرید. مهارت بعدی این است که عنصری را به‌خاطر جایش نسبت به عنصر دیگر استایل بدهید — داخل یک بخش، فقط به‌عنوان فرزند مستقیم، یا دقیقاً بلافاصله بعد از یک تیتر.

ترکیب‌کننده CSS چیست؟

ترکیب‌کننده (combinator) یک نماد — یا یک فاصله — است که بین دو سلکتور می‌نشیند و به مرورگر می‌گوید این دو قسمت در درخت HTML چه نسبتی باید داشته باشند. سمت چپ مرجع است؛ سمت راست همان عنصری است که واقعاً استایل می‌گیرد.

چهار ترکیب‌کننده در یک نگاه

اول نمادها را بشناسید؛ بعد برای هر کدام یک مثال کوتاه تمرین کنید.

📊 ترکیب‌کننده‌های CSS

ترکیب‌کننده نماد چه چیزی را می‌گیرد مثال
نسل (descendant) (فاصله) هر تطبیق تو‌در‌تو داخل یک والد article p
فرزند (child) > فقط فرزند مستقیم ul > li
هم‌سطح مجاور + هم‌سطح بلافاصله بعدی h2 + p
هم‌سطح عمومی ~ هر هم‌سطح بعدی در همان سطح h2 ~ p

ترکیب‌کنندهٔ نسل (فاصله)

فاصله بین دو سلکتور یعنی «سلکتور دوم را هر جا داخل اولی پیدا کن.» عمق مهم نیست — نوه و سطوح عمیق‌تر هم جور می‌شوند.

نسل — پاراگراف‌های داخل article

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

نسل کجا مفید است

برای ظاهر مشترک داخل یک ناحیه از descendant استفاده کنید: همهٔ پاراگراف‌های یک article، همهٔ لینک‌های یک nav. اگر فقط فرزند مستقیم می‌خواهید و تطبیق‌های عمیق‌تر زیادی پهن است، سراغ ترکیب‌کنندهٔ فرزند بروید.

ترکیب‌کنندهٔ فرزند (>)

نماد > فقط فرزند مستقیم را می‌گیرد. عنصری که عمیق‌تر از یک سطح تو رفته باشد جور نمی‌شود.

فرزند — فقط آیتم‌های مستقیم فهرست

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

فاصله در برابر > با یک تصویر

اگر HTML این باشد: <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul>، آن‌گاه .menu > li فقط li بیرونی را استایل می‌دهد. سلکتور نسل .menu li هم بیرونی و هم تو‌در‌تو را می‌گیرد.

ترکیب‌کنندهٔ هم‌سطح مجاور (+)

نماد + عنصری را می‌گیرد که بلافاصله بعد از مرجع هم‌سطحش می‌آید — همان والد، همسایهٔ بعدی، بدون عنصر دیگر بینشان.

هم‌سطح مجاور — اولین پاراگراف بعد از h2

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

یک الگوی رایج

خیلی از چیدمان‌ها می‌خواهند پاراگراف اول بعد از تیتر کمی متفاوت باشد (متن آغازین). با h2 + p همان همسایه را هدف می‌گیرید؛ لازم نیست به هر پاراگراف class جدا بدهید.

ترکیب‌کنندهٔ هم‌سطح عمومی (~)

نماد ~ هر هم‌سطح بعدی را که با سلکتور دوم جور شود می‌گیرد — نه فقط همسایهٔ فوری. هنوز باید والد مشترک داشته باشند.

هم‌سطح عمومی — پاراگراف‌های بعد از h2

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

+ در برابر ~

  • h2 + p — فقط پاراگرافی که دقیقاً بلافاصله بعد از h2 است
  • h2 ~ p — هر p هم‌سطحی که بعد از آن h2 بیاید (اول، دوم، سوم…)
    اگر بین h2 و یک p یک div نشسته باشد، h2 + p برای آن p شکست می‌خورد؛ ولی h2 ~ p همچنان می‌تواند پاراگراف‌های هم‌سطح بعدی را بگیرد.

کدام ترکیب‌کننده را انتخاب کنید

  • برای «همهٔ این نوع‌ها داخل این ناحیه» → نسل
  • وقتی تو‌در‌تو باعث استایل ناخواسته روی فهرست یا ویجت تو‌در‌تو می‌شود → فرزند
  • برای الگوی همسایهٔ یک‌قدمی (تیتر → پاراگراف اول) → هم‌سطح مجاور
  • وقتی چند هم‌سطح بعد از یک نشانه باید ظاهر مشترک داشته باشند → هم‌سطح عمومی
    تا وقتی یاد می‌گیرید زنجیره‌ها را کوتاه نگه دارید. زنجیرهٔ بلند قدرتمند است — و با عوض شدن HTML زود می‌شکند.

خودتان امتحان کنید

  1. صفحهٔ کوچکی بسازید با یک <article> که داخلش <h2>، یک <p>، یک <div> با <p> تو‌در‌تو، و بعد یک <p> دیگر بعد از div باشد.
  2. قانون article p { color: #334155; } را بگذارید و ببینید هر دو پاراگراف داخل article عوض می‌شوند (نسل).
  3. قانون را به article > p { color: #0f766e; } تغییر دهید و تازه کنید — فقط پاراگراف‌های فرزند مستقیم باید آن رنگ را بگیرند؛ p داخل div نه.
  4. h2 + p { font-weight: bold; } اضافه کنید و فقط پاراگراف بلافاصله بعد از تیتر باید ضخیم شود.
  5. اختیاری: h2 ~ p { max-width: 36rem; } را امتحان کنید و ببینید همهٔ پاراگراف‌های هم‌سطح بعد از تیتر max-width می‌گیرند.

اشتباهات رایج

  • استفاده از نسل وقتی منظورتان فرزند بود — ویجت‌های تو‌در‌تو ناگهان استایلی می‌گیرند که فقط برای سطح بالا می‌خواستید
  • انتظار اینکه h2 + p از روی عنصر میانی بپرد — مجاور یعنی بلافاصله
  • خواندن ترکیب‌کننده برعکس — استایل به سلکتور سمت راست می‌رسد، نه مرجع سمت چپ
  • گذاشتن ویرگول جایی که ترکیب‌کننده می‌خواستید (h2, p سلکتورها را گروه می‌کند؛ معنای «p بعد از h2» ندارد)
  • فرض اینکه ~ حتماً همسایهٔ چسبیده می‌خواهد — هم‌سطح عمومی فقط «بعدتر در همان سطح» می‌خواهد، نه «درِ بعدی»

خلاصه

  • ترکیب‌کننده‌ها سلکتورها را با نسبت HTML وصل می‌کنند: داخل، فرزند مستقیم، هم‌سطح بعدی، یا هم‌سطح‌های بعدی
  • فاصله = نسل (هر عمقی)؛ > = فقط فرزند مستقیم
  • + = هم‌سطح بلافاصله بعدی؛ ~ = هر هم‌سطح بعدی مطابق
  • استایل به سلکتور راست ترکیب‌کننده اعمال می‌شود
  • تنگ‌ترین ترکیب‌کننده‌ای را انتخاب کنید که هنوز منظورتان را برساند
  • با عوض کردن فاصله به > و مقایسهٔ + با ~ روی همان صفحه تمرین کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش