سبد خرید (0)

تبلیغات

گروه بندی selectorها در CSS

گروه بندی Selectorها در CSS

Wiki

بعضی مواقع روی چندین Selector یک Style یکسان تنظیم می شود، مانند مثال زیر:

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

برای کوتاه تر شدن کد، می توانید Selectorها را در یک گروه قرار دهید.

هر Selector را با علامت "," جدا کنید.

بنابراین با توجه به مثال بالا خواهیم داشت:

مثال (گروه بندی selectorها در CSS)

h1,h2,p
{
color:green;
}
خودتان امتحان کنید »

Selectorهای تو در تو

Wiki

همان طور که از عنوان این مطلب مشخص است در 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;
}
خودتان امتحان کنید »

دیدگاه‌ها  

-4 # شیما شیرازی زاده 1395-06-31 21:49
سلام تشکر از سایت خوبتون.میشه لطف کنید مثال سلکتور تو در تو رو توضیح بدید .چرا pداخل div که قرارگرفته سفید شده و دیگه ویژگی سلکتور اول رو نداره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-04 20:10
با سلام و تشکر.
سلکتور تو در تو همونطور که از اسمش مشخص برای انتخاب المان‌هایی به کار میره که حتما در داخل یه المان دیگه باشن. این سلکتور با استفاده از کلاس‌ها خیلی نمود بیشتری پیدا میکنه و توسط اون میشه خیلی از المان‌ها رو اختصاصی سبک‌دهی کرد.
<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 اول رنگ قرمز می‌گیرن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Mohammaddddd 1395-01-29 14:57
با سلام..گزینشگر رو نوشتید گرینشگر..سایتتو ن عالیه...پایدار باشید..
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # امیر پهلوان صادق 1395-01-31 09:30
سلام، با تشکر و سپاس از شما ... اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!