محدد الأحفاد (Descendant selector)

الدرس 8 من 15 في دورة محددات CSS على Coddy.

في الموضوع السابق، تعرفنا على المنسق الابن (child combinator)، الذي يستهدف الأبناء المباشرين للعنصر. الآن، دعونا نستكشف محددات الأحفاد (descendant selectors)، والتي يُشار إليها بمسافة فارغة. يسمح لك محدد الأحفاد باستهداف العناصر المتداخلة داخل عنصر آخر في أي مستوى، وليس فقط الأبناء المباشرين.

بناء الجملة (Syntax)

selector1 selector2 {
  /* property declarations */
}

على سبيل المثال،

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

ستقوم قاعدة CSS أعلاه بتنسيق كلا الفقرتين باللون الأحمر وبحجم خط قدره 2em.

كيف يرتبط ذلك بمحددات الأبناء؟

محدد الأحفاد أكثر عمومية من محدد الأبناء. وهذا يعني أن محدد الأحفاد سيطابق جميع العناصر التي تعتبر أحفاداً لعنصر محدد، بينما سيطابق محدد الأبناء فقط العناصر التي تعتبر أبناءً مباشرين لعنصر محدد.

على سبيل المثال، المحدد div p سيطابق جميع عناصر p التي تعتبر أحفاداً لعنصر div، بما في ذلك عناصر p المتداخلة داخل عناصر p أخرى. أما المحدد div > p فسيطبق فقط على عناصر p التي تعتبر أبناءً مباشرين لعنصر div.

التحدي

سهل

بناءً على التمرين السابق، دعنا نستخدم نفس هيكل HTML. اكتب قاعدة CSS باستخدام محدد السليل (descendant selector) لتنسيق جميع الفقرات داخل العنصر .list، بغض النظر عن مستوى تداخلها. امنحها لوناً وحجماً وخطاً جديداً كما تراه مناسباً

جرّب بنفسك

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

جميع دروس محددات CSS

1مقدمة في محددات CSS

الغرض من محددات CSS لماذا هي مهمة؟

4محددات الخصائص

مقدمة في محددات الخصائص التواجد والقيم المطابقة محددات قيم الخصائص محددات قيم الخصائص 2 محددات قيم الخصائص 3

2المحددات البسيطة

محددات النوع محددات Class محددات ID المحددات العامة

3محددات الربط (Combinator Selectors)

محدد الابن (Child selector)محدد الأحفاد (Descendant selector)محدد الشقيق المجاور (Adjacent sibling selector)محدد الشقيق العام (General sibling selector)