گروه بندی selectorها در CSS
گروه بندی 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;
}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 33871
دیدگاه‌ها
با سپاس فراوان از آموزش های بسیار خوبتون انشالله همیشه در زندگی موفق باشد
سلام تشکر از سایت خوبتون.میشه لطف کنید مثال سلکتور تو در تو رو توضیح بدید .چرا pداخل div که قرارگرفته سفید شده و دیگه ویژگی سلکتور اول رو نداره
با سلام و تشکر.
سلکتور تو در تو همونطور که از اسمش مشخص برای انتخاب المان‌هایی به کار میره که حتما در داخل یه المان دیگه باشن. این سلکتور با استفاده از کلاس‌ها خیلی نمود بیشتری پیدا میکنه و توسط اون میشه خیلی از المان‌ها رو اختصاصی سبک‌دهی کرد.
<style> div.text > p {color:red;} </style> <div class="tes t"> <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 اول رنگ قرمز می‌گیرن.
با سلام..گزینشگر رو نوشتید گرینشگر..سایتتو ن عالیه...پایدار باشید..
سلام، با تشکر و سپاس از شما ... اصلاح شد.