گزینشگرهای تو در تو , گزینشگرهای گروهی در 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;

}

.market {
Background-color:green;
}

.market 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>