استفاده از چند کلاس در CSS

در بخش قبل، ما با کلاس ها کار کردیم. کلاس هایی که حاوی یک کلمه بودند. در HTML این امکان وجود دارد تا از یک لیست از نام کلاس ها، که با یک فاصله ی سفید از یکدیگر جدا شده اند، بعنوان مقدار برای یک class استفاده کنیم. بعنوان مثال، اگر بخواهیم یک عنصر از کلاس urgent و warning استفاده کند، می توانیم به صورت زیر عمل کنیم:

<p class="urgent warning">آموزش زبان برنامه نویسی سی اس اس</p>
<p>صفحات اچ تی ام ال به تنهایی زیبایی خاصی ندارند <span class="warning">اما با استفاده از سی اس اس می توانیم </span>جلوه های زیبایی به سایت خود بدهیم</p>

ترتیب نام کلاس ها در داخل خصوصیت calss اهمیتی ندارد. بنابراین کلاس warning urgent نیز ما را کفایت می کند و دقیقا به همان نتیجه ی قبلی می رساند؛ بدون توجه به اینکه خصوصیت class سی اس اس چگونه نوشته شده باشد.

اکنون فرض کنید می خواهیم تمام عناصری که کلاس warning دارند به صورت bold نشان داده شوند؛ و عناصری که کلاس urgent دارند به صورت italic نشان داده شوند و عناصری که از هردو مقدار استفاده می کنند، یک پس زمینه(background) به رنگ نقره ای(silver) داشته باشند؛ این کار به صورت زیر انجام می شود:

.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

 با متصل کردن دو سلکتور کلاس به یکدیگر، مشاهده می کنید که عنصری انتخاب می شود که هر دوی این کلاس ها را به کار می برد. و ترتیب هم اهمیتی ندارد. همان طور که در کدهای html بالایی مشاهده می کنید، عنصر p اولی، از عبارت class="urgent warning" استفاده می کند اما در کدهای CSS، سلکتور ما به صورت .warning.urgent نوشته شده است. صرف نظر از این، دستوری که نوشتیم باعث می شود که پاراگراف "...آموزش برنامه نویسی سی اس اس" یک رنگ پس زمینه ی نقره ای(silver) داشته باشد، همان طور که در تصویر 2.8 نشان داده شده است. دلیل اینکه این کار به درستی انجام شده است این است که ترتیب نام کلاس ها اهمیتی ندارد. اما نمی خواهیم بگوییم که ترتیب کلاس ها همواره بی ربط است، بعداً در این کتاب به آن خواهیم پرداخت:

(تصویر 2.8)

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

p.warning.help {background: red;}

 همان طور که مشاهده می کنید، این سلکتور تنها عناصر p را مورد تطابق قرار می دهد که حاوی دو کلاس warning و help باشند. بنابراین، این سلکتور عناصر p ، با کلاس warning و urgent را مورد تطابق قرار نمی دهد. اما عنصر زیر را مورد تطابق قرار می دهد:

<p class="urgent warning help">Help me!</p>

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