گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS

گزینشگرهای گروهی ( CSS Grouping Selectors )

بساری از عناصر در یک سند CSS ، دارای style های یکسانی می باشند ، تکرار این گونه از خصوصیت ها میتواند حجم سند CSS را افزایش دهد و هچنین راحتی کنترل و کار با سندهای CSS را تحت تاثیر قرار دهد .

برای بهینه نمودن کدهای CSS از تکنیک گزینشگرهای گروهی ( CSS Grouping Selectors ) برای افزایش کنترل ، کاهش حجم کدها و سند CSS استفاده میشود .

h1 {
    Color:#cccccc;
}
h2{
    Color:#cccccc;
}
p{
    Color:#cccccc;
}

هر یک از گزینشگرها را با استفاده از کاما ( , ) از یکدیگر جدا می کنیم و خصوصیت یا style مشترک را برای آنها تعیین مینمائیم. به طور مثال در زیر از گزینشگرهای بالا ( h1,h2,p ) با style های یکسان یک گروه از گزینشگرها را می سازیم .

h1,h2,p {
    Color:#cccccc;
}

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

گزینشگرهای تو در تو ( CSS Nesting Selector )

با استفاده از این خاصیت میتوان گزینش های تو در تویی را انجام داد . به طور مثال در نمونه زیر یک style خاص برای تمامی عناصر p در نظر گرفته شده است . با استفاده از این خاصیت میتوان با اضافه نمودن یک class به یک عنصر p خاص یک style خاص دیگر را نیز به این عنصر p اضافه نمود.قابل توجه است که این عنصر p از خصوصیت تمامی عناصر p نیز پیروی خواهد کرد.

p {
    Color:green;
    Text-align:center;

}

.marked {
    Background-color:green;
}

.marked p {
    Color:white;
}

<p>This is a blue, center-aligned paragraph.</p>
<div class="marked">
    <p>This p element should not be blue.</p>
</div>
<p
>p elements inside a "marked" classed element keeps the alignment style, but has a different
text color.</p
>

این نوع از گزینش میتواند به صورت زیر نیز در نمونه های دیگر انجام گیرد

p {
    Color:green;
}
p span {
    color:red;
}

<p> this is a <span> example </span> text </p>