گروه بندی Selectorها در CSS
بعضی مواقع روی چندین Selector یک Style یکسان تنظیم می شود، مانند مثال زیر:
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
برای کوتاه تر شدن کد، می توانید Selectorها را در یک گروه قرار دهید.
هر Selector را با علامت "," جدا کنید.
بنابراین با توجه به مثال بالا خواهیم داشت:
Selectorهای تو در تو
همان طور که از عنوان این مطلب مشخص است در CSS این امکان وجود دارد که Selectorهای آبشاری تعریف کنیم.
در مثال زیر، در Selector اول یک Style برای تمام تگ های <p> و همچنین در Selector دوم برای تمام عناصر با کلاس "marked" مشخص شده است، ولی در Selector تو در توی سوم Style مورد نظر روی تمام تگ های <p> که داخل عنصری با کلاس "marked" است اعمال می شود.
مثال (گروه بندی selectorها در CSS)
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
خودتان امتحان کنید »{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
سلکتور تو در تو همونطور که از اسمش مشخص برای انتخاب المان‌هایی به کار میره که حتما در داخل یه المان دیگه باشن. این سلکتور با استفاده از کلاس‌ها خیلی نمود بیشتری پیدا میکنه و توسط اون میشه خیلی از المان‌ها رو اختصاصی سبک‌دهی کرد.
<style> div.text > p {color:red;} </style> <div class="test"> <p> this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. </p> </div> <div> <p> this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. this is a test text. </p> </div>
توسط استایلی که تعریف شده فقط پاراگراف‌های div اول رنگ قرمز می‌گیرن.