محدد الأحفاد
جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 2 من 43.
المحدد الأول هو محدد السليل. نستخدمه عندما نريد تنسيق العناصر الموجودة داخل عنصر آخر، حتى لو كانت متداخلة بعمق. على سبيل المثال، يوجد فقرَتا نص داخل container.
<div class="container">
<p>This is a paragraph inside a div.</p& <section>
<p>This is a paragraph inside a section that is inside a div.</p>
</section>
</div>والآن، لنستخدم محددًا للنسل لتنسيق جميع الفقرات الموجودة داخل div:
.container p {
color: blue;
}ستتحول جميع الفقرات داخل عنصر .container div إلى اللون blue، حتى الفقرة المتداخلة داخل عنصر section.
التحدي
سهلأنشئ قاعدة CSS تحدد جميع عناصر القائمة (<li>) التي تنحدر من عنصر ذي الفئة "navigation"، وتغيّر لون نصها إلى purple.
جرّب بنفسك
<html>
<head>
<title>Descendant Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<ul class="navigation">
<li>Home</li>
<li>Team
<ul>
<li>Players</li>
<li>Coaches</li>
</ul>
</li>
<li>Tickets</li>
</ul>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعةتدرّب بنفسك: Playground لـ Web