شما اینجا هستید

ترکیب کننده، از ارتباط بین سلکتورها برای انتخاب یک سلکتور خاص استفاده میکند.

سلکتور CSS میتواند یک یا چند سلکتور ساده را شامل شود. میتوانیم در بین سلکتورها، یک ترکیب دهنده قرار دهیم.

چهار نوع ترکیب دهنده متفاوت در CSS وجود دارد:

  • سلکتور نسل
  • سلکتور فرزند
  • سلکتور خواهر و برادر مجاور
  • سلکتور خواهر و برادر عمومی

با هر کدام از ترکیب دهنده های نامبرده در ادامه آشنا خواهیم شد.

سلکتور نسل - Descendant Selector

انتخابگر نسل همه عناصری که از نسل عنصر مشخص شده هستند را انتخاب میکند.

مثال زیر همه عناصر <p> درون عناصر <div> را انتخاب میکند:

<html>

<head>

<style>

div p {

    background-color: yellow;

}

</style>

</head>

<body>


<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <span><p>Paragraph 3 in the div.</p></span>

</div>


<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>


</body>

</html>

 

گزینشگر فرزند – child selector

گزینشگر فرزند همه عناصری را که به صورت مستقیم فرزند عنصر مشخص شده هستند را گزینش میکند.

مثال زیر همه عناصر <p> را که فرزند مستقیم، عنصر <div> هستند را مشخص میکند :

<html>

<head>

<style>

div > p {

    background-color: yellow;

}

</style>

</head>

<body>


<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->

</div>


<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>


</body>

</html>

 

گزینشگر خواهر و برادر همجوار – adjacent sibling selector

گزینشگر خواهر و برادر مجاور همه عناصری را که با عنصر مشخص شده همجوار هستند را گزینش میکند. عناصر خواهر و برادر باید عنصر والد یکسانی داشته باشند.

در اینجا همجوار یعنی عناصری که دقیقاً بعد از هم نوشته شوند.

مثال زیر همه عناصر <p> که دقیقاً بعد از عناصر <div> نوشته شده اند را گزینش میکند:

<html>

<head>

<style>

div + p {

    background-color: yellow;

}

</style>

</head>

<body>


<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

</div>


<p>Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>


</body>

</html>

 

گزینشگر خواهر و برادر عمومی – general sibling selector

گزینشگر خواهر و برادر عمومی همه عناصر خواهر و برادر با عنصر مشخص شده را گزینش میکند.

مثال پایین همه عناصر <p> که با عناصر <div> خواهر و برادر هستند را انتخاب میکند:

<html>

<head>

<style>

div ~ p {

    background-color: yellow;

}

</style>

</head>

<body>


<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

</div>


<p>Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>


</body>

</html>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.