گروه بندی سلکتورها در CSS

تا کنون برای اعمال یک استایل تکی بر روی یک سلکتور تکی، تکنیک های ساده ای را یاد گرفته ایم. اما اگر بخواهیم این روش را بر روی چندین عنصر به کار ببریم، باید چه کار کنیم؟ ممکن است بخواهیم ، از بیش از یک سلکتور استفاده کنیم و یا بیش از یک استایل را بر روی یک عنصر یا گروهی از عناصر اعمال کنیم. راه حل چیست؟. راه حل این است که سلکتورها یا دستورات CSS را گروه بندی کنیم. در زیر به توضیح این مطلب می پردازیم.

فرض کنید که می خواهیم رنگ متن  یک عنصر h2 و یک عنصر p خاکستری(gray) باشد. ساده ترین راه برای انجام این کار، این است که از دستور زیر استفاده کنیم:

h2, p {color: gray;}

 با قرار دادن سلکتورهای h2 و p  در سمت چپ  آکولادها و جدا کردن آنها به وسیله ی کاما، ما یک دستور برای هردو مورد تعریف کرده ایم. این کار باعث می شود  که استایل سمت راست یعنی color: gray بر روی عناصر سمت چپ یعنی h2 و p اعمال شود. علامت کاما، به مرورگر می گوید که دو سلکتور متفاوت وجود دارند که برای آنها یک دستور تعریف شده است. اگر کاما را برداریم، دستور ما کاملا متفاوت خواهد شد. برای اطلاعات بیشتر در این زمینه به مقاله ی سلکتورهای فرزند در CSS  یا Descendant Selectors در صفحه 56 مراجعه کنید.

 برای گروه بندی کردن سلکتورها در CSS هیچ محدودیتی وجود ندارد.بعنوان مثال، اگر بخواهیم برای  تعداد زیادی از عناصر، رنگ خاکستری(gray) را تعریف کنیم، می توانیم به صورت زیر عمل کنیم:

body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}

 گروه بندی سلکتورها، به برنامه نویسی امکان می دهد تا استایل های خود را جمع و جور کند. این کار باعث کوتاه شدن برگه ی استایل می شود. بعنوان مثال، دو کد زیر یک کار را انجام می دهند اما بسیار واضح است استفاده از کدم یک برای تایپ کردن ساده تر است:

h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}
h6 {color: purple;}

h1, h2, h3, h4, h5, h6 {color: purple;}

 گروه بندی کردن، به ما امکان می دهد تا انتخاب های جالبی داشته باشیم. بعنوان مثال، در مثال زیر، تمام گروه های دستوری یکسان هستند- هرکدام از آنها یک راه متفاوت برای گروه بندی کردن سلکتورها و  اعلان ها مشخص می کند:

/* group 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}

/* group 2 */
h1, h2, h4 {color: silver;}
h2, h3 {background: gray;}
h1, h4, b {background: white;}
h3 {color: white;}
b {color: gray;}

/* group 3 */
h1, h4 {color: silver; background: white;}
h2 {color: silver;}
h3 {color: white;}
h2, h3 {background: gray;}
b {color: gray; background: white;}

 هریک از گروه های کد بالا، باعث ایجاد تصویر 2.4 می شوند(این استایل ها از روش گروه بندی کردن اعلان ها که در مقاله ی گروه بندی کردن دستورات(Grouping Declarations) در صفحه 35 آمده است، استفاده می کنند).

(تصویر 2.4)

سلکتور سراسری در CSS

در CSS2 یک سلکتور ساده ی جدید به نام، سلکتور سراسری معرفی شد؛ که از علامت ستاره(*) استفاده می کند. این سلکتور، تمام عناصر را مورد تطابق قرار می دهد. بعنوان مثال، برای اینکه هر عنصر در داخل سند، به رنگ قرمز(red) در بیاید، می توانیم به صورت زیر عمل کنیم:

*{color: red;}

دستور بالا معادل با یک سلکتور گروه بندی شده است که لیست تک تک عناصری که در داخل یک سند وجود دارند را مورد استفاده قرار می دهد. سلکتور سراسری به ما امکان می دهد تا مقدار رنگ red را برای تمام عناصر درون سند، تنظیم کنیم.  با این حال مواظب باشید:

با اینکه استفاده از سلکتور جهانی راحت است، و  هر عنصری که درداخل میدان دید آن باشد را مورد هدف قرار می دهد، اما می تواند عواقب ناخواسته ای داشته باشد، که بعدا دراین کتاب به آنها خواهیم پرداخت.

  {module کمک نقدی به نویسنده}