لنتصور أنه لدي Class التالية:
<div id="wrap"> <div class="inner"> <span>edit</span></div> </div>
و:
<div id="footer"> <div class="nav"> <span>copy</span></div> </div>
وأريد إعطاء لون مختلف للعبارات الموجودة بين الوسم span، ان كتبت مباشرة:
span { color:#f00 }
فجميع العبارات الموجودة بين وسم span في كامل الصفحة ستأخذ اللون الأحمر، كذلك ان حددت فقط وسم span الموجود في الوسم p كالتالي:
p span { color:#f00 }
قد تكون هناك عبارات أخرى بين span ثم بين p هي الأخرى ستأخذ اللون الأحمر، إذن ما العمل ؟
هنا يوجد أكثر من حل، إما أن تنشئ كلاس خاص بهذا الجزء فقط مثل:
<div id="footer"> <div class="nav"> <span class="alert">copy</span></div> </div>
وشخصيا لا افضل هذه الطريقة كثيرا، خصوصا أنني سأنتج الكثير من Class في صفحة HTML، الطريقة الأخرى وهي صلب الموضوع، تكون بالحاق أي وسم Tag ب Class الذي ينتمي إليه:
#wrap .inner p span { color:#f00 }
في حال كان لدينا وسم span داخل وسم p مثلا ونريد تغيير خصائص كل الوسوم span أينما وجدت في الصفحة، وتكون فقط ضمن وسم p فهذه الحالة يمكننا استعمال:
p > span { color:#f00 }
أو حتى:
p span { color:#f00 }
