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

استفاده مناسب از کدهای css برای خلاصه نویسی و کنترل موثر بر روی عناصر به وسیله گزینشگرهای تو در تو ( CSS Nesting Selector ) و گروهی ( CSS Grouping Selectors )


امیر سروری ۵ دیدگاه CSS , اصول طراحی وب سایت جمعه, ۹ام اردیبهشت , ۱۳۹۰ 11984 بازدید

گزینشگرهای گروهی ( 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>


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۵ دیدگاه برای این نوشته ثبت شده است


  1. امید راد
    ۲۸ فروردین ۱۳۹۱

    سلام
    یه اشتباه فکر کنم وجود داره :
    p .market {
    Color:white;
    }
    باید بشه :
    .market p{
    Color:white;
    }




  2. داوود فضائلی
    ۱۴ مرداد ۱۳۹۱

    سلام آقا امیر
    شبت بخیر و خسته نباشید؛
    فکر کنم در این قسمت یک اشتباه رخ داده:

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

    }

    اگه اشتباه نکنم باید رنگ یا همون color به blue تغییر پیدا کنه




    • امیر سروری
      ۲۶ مرداد ۱۳۹۱

      داوود عزیز در واقع در این قسمتی که شما فرمودین موضوع رنگی هست که به زیر مجوعه market داده میشه و تفاوتی که با تگهای p که به صورت عمومی سبز در نظر گرفته شدند . نکته در اون قسمت هست .




  3. Mohsen
    ۱۹ اردیبهشت ۱۳۹۲

    فکر نکنم که p.market اشتباه باشه اگه سری به این لینک http://www.w3.org/TR/CSS2/selector.html بزنید انواع selector ها رو توضیح داده.



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2019 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.