ترکیب‌کننده‌های CSS چیستند؟ آموزش Descendant، Child، Adjacent و General Sibling

ترکیب‌کننده‌های CSS برای تعریف رابطه بین selectorها در CSS استفاده می‌شوند. آن‌ها کمک می‌کنند عناصر را بر اساس رابطه‌شان با عناصر دیگر انتخاب کنیم، و این موضوع امکان استایل‌دهی دقیق‌تر و کارآمدتر را فراهم می‌کند.

ما برخی از ترکیب‌کننده‌های اصلی CSS و کاربردهای آن‌ها را بررسی خواهیم کرد و با ترکیب‌کننده نسل‌بعدی یا descendant combinator شروع می‌کنیم.

ترکیب‌کننده descendant برای هدف‌گیری عناصری استفاده می‌شود که با selector دوم مطابقت دارند، به شرطی که درون یک عنصر نیا (ancestor) قرار گرفته باشند که با selector اول مطابقت دارد. عنصر نیا می‌تواند والد مستقیم باشد یا والدِ والد.

برای درک بهتر نحوه عملکرد آن، بیایید به یک مثال نگاه کنیم.

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<figure>
  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Relaxing Cat">
  <figcaption>A relaxing cat with a border</figcaption>
</figure>

Open Sandbox

در مثال بالا، از ترکیب‌کننده descendant استفاده می‌کنیم تا تمام عناصر img داخل عناصر figure را انتخاب کرده و یک حاشیه قرمزِ یکدست در هر چهار طرف آن‌ها اعمال کنیم.

توجه داشته باشید که بین selector والد و فرزند از یک فاصله (space) استفاده می‌شود.

در این مورد، figure والد و img فرزند در نظر گرفته می‌شود.

اگر چندین تصویر داخل یک عنصر figure داشته باشید، استفاده از ترکیب‌کننده descendant راه خوبی برای اعمال یک حاشیه مشکیِ یکدست دور همه آن تصاویر خواهد بود.

نوع دیگر از ترکیب‌کننده‌ها، ترکیب‌کننده فرزند یا child combinator است.

ترکیب‌کننده فرزند (>) در CSS برای انتخاب عناصری استفاده می‌شود که فرزند مستقیم یک عنصر والد مشخص هستند.

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

بیایید به مثال HTML زیر نگاه کنیم:

<div class="container">
  <p>First</p>
  <div>
    <p>Second</p>
  </div>
  <div>
    <p>Third</p>
  </div>
</div>

Open Sandbox

در ساختار HTML بالا، کلاس container به یک عنصر div اعمال شده است.

داخل این container، یک عنصر p به عنوان فرزند مستقیم وجود دارد ("First")، و بعد از آن دو عنصر div دیگر قرار دارند که هر کدام یک عنصر p درون خود دارند ("Second" و "Third").

اولین عنصر p یک فرزند مستقیم از عنصر .container است، در حالی که دو عنصر p دیگر داخل divهای دیگری قرار گرفته‌اند، بنابراین از نسل‌های عمیق‌تر آن محسوب می‌شوند.

برای اعمال استایل فقط به فرزند مستقیم کلاس container، می‌توانید از ترکیب‌کننده فرزند به این صورت استفاده کنید:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<div class="container">
  <p>First</p>
  <div>
    <p>Second</p>
  </div>
  <div>
    <p>Third</p>
  </div>
</div>

Open Sandbox

در مثال بالا، ما فقط فرزند مستقیم کلاس container را هدف قرار می‌دهیم. این کار باعث می‌شود رنگ متن آن فرزند مستقیم آبی شود.

از آنجا که دو عنصر پاراگراف دیگر داخل عناصر div قرار گرفته‌اند، فرزند مستقیم کلاس container محسوب نمی‌شوند و رنگ متن آبی را دریافت نخواهند کرد.

یکی دیگر از ترکیب‌کننده‌های رایج، ترکیب‌کننده همسایه بعدی یا next-sibling combinator است.

ترکیب‌کننده همسایه بعدی (+) در CSS عنصری را انتخاب می‌کند که بلافاصله بعد از یک عنصر هم‌سطح مشخص قرار گرفته باشد. این ترکیب‌کننده زمانی مفید است که بخواهید به عنصری استایل بدهید که مستقیم بعد از عنصر دیگری آمده است، و این امکان را می‌دهد که بر اساس موقعیت عنصر نسبت به هم‌سطح‌هایش، استایل‌دهی هدفمند انجام دهید.

بیایید به مثال HTML زیر نگاه کنیم:

<figure>
  <img
    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
    alt="A cute orange cat lying on its back."
  />
  <figcaption>A cute orange cat lying on its back.</figcaption>
</figure>

Open Sandbox

در اینجا، یک عنصر figure داریم که شامل یک عنصر img است و بعد از آن یک عنصر figcaption آمده است. عنصر figcaption همسایه بلافاصله بعد از عنصر img است.

اگر بخواهید دور عنصر figcaption یک حاشیه مشکی اعمال کنید، می‌توانید از ترکیب‌کننده همسایه بعدی به این صورت استفاده کنید:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<figure>
  <img
    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
    alt="A cute orange cat lying on its back."
  />
  <figcaption>A cute orange cat lying on its back.</figcaption>
</figure>

Open Sandbox

در این مثال، ترکیب‌کننده همسایه بعدی (+) عنصر figcaptionای را انتخاب می‌کند که بلافاصله بعد از عنصر img قرار گرفته است. قانون CSS اعمال‌شده یک حاشیه مشکیِ یکدست با ضخامت 4px دور figcaption اضافه می‌کند.

یکی دیگر از ترکیب‌کننده‌های رایج، ترکیب‌کننده همسایه‌های بعدی یا subsequent-sibling combinator است.

ترکیب‌کننده همسایه‌های بعدی (~) در CSS همه هم‌سطح‌های یک عنصر مشخص را که بعد از آن می‌آیند، انتخاب می‌کند.

برخلاف ترکیب‌کننده همسایه بعدی که فقط هم‌سطح بلافاصله بعدی را هدف قرار می‌دهد، ترکیب‌کننده همسایه‌های بعدی (~) می‌تواند هر یک از هم‌سطح‌هایی را که بعد از عنصر مشخص آمده‌اند هدف قرار دهد، و این موضوع انعطاف‌پذیری بیشتری در استایل‌دهی فراهم می‌کند.

بیایید به مثال HTML زیر نگاه کنیم:

<div class="container">
  <h2>Subheading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
  <p>Another paragraph element</p>
</div>

Open Sandbox

در این ساختار HTML، یک عنصر h2 داریم که بعد از آن چهار عنصر پاراگراف آمده‌اند. این عناصر پاراگراف، هم‌سطح‌های عنصر h2 هستند.

اگر بخواهید به تمام عناصر پاراگرافی که بعد از عنصر h2 می‌آیند استایل بدهید، می‌توانید از ترکیب‌کننده همسایه‌های بعدی به این صورت استفاده کنید:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<div class="container">
  <h2>Subheading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
  <p>Another paragraph element</p>
</div>

Open Sandbox

در این مثال، رنگ متن تمام عناصر پاراگرافی که بعد از h2 آمده‌اند سبز خواهد شد.

ترکیب‌کننده همسایه‌های بعدی (~) تمام پاراگراف‌های هم‌سطحی را که بعد از عنصر h2 ظاهر می‌شوند هدف قرار می‌دهد، صرف‌نظر از اینکه همسایه بلافاصله بعدی باشند یا نه.

در نتیجه، درک و استفاده از ترکیب‌کننده‌های مختلف CSS به شما اجازه می‌دهد استایل‌های دقیق‌تری را روی عناصر HTML خود اعمال کنید و کنترل و انعطاف‌پذیری طراحی خود را افزایش دهید.

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

سوالات

کدام قانون CSS همه عناصر span را که داخل عناصر div هستند، بدون توجه به میزان عمق تو‌در‌تویی آن‌ها، استایل‌دهی می‌کند؟

div > span {
  color: red;
}

div + span {
  color: red;
}

div ~ span {
  color: red;
}

div span {
  color: red;
}

کدام قانون CSS فقط عناصر liای را که فرزند مستقیم عناصر ul هستند استایل‌دهی می‌کند؟

ul > li {
  font-weight: bold;
}

ul li {
  font-weight: bold;
}

ul + li {
  font-weight: bold;
}

ul ~ li {
  font-weight: bold;
}

کدام قانون CSS اولین عنصر p را که بلافاصله بعد از هر عنصر h1 می‌آید استایل‌دهی می‌کند؟

h1 > p {
  margin-top: 0;
}

h1 + p {
  margin-top: 0;
}

h1 ~ p {
  margin-top: 0;
}

h1 p {
  margin-top: 0;
}