به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

آموزش سلکتور کلاس(class) در CSS

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

<p class="warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>
<p>With plutonium,
 <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span> 
 This can be accomplished by keeping the various masses separate.</p>

 برای مرتبط کرده و پیوند دادن استایل های یک سلکتور کلاس(class) به یک عنصر(element)، ما باید یک خصوصیت class را به عنصر مورد نظر انتساب دهیم. در کدهای بالا، یک مقدار calss به نام warning به دو عنصر داده شده است. ابتدا به یک پاراگراف و سپس به یک عنصر <span> که در داخل پاراگراف دوم قرار دارد. تنها کاری که اکنون باید انجام دهیم، این است که استایل های خود را به این عناصر که به آنها خصوصیت class داده ایم، وصل کنیم. در سندهای HTML، ما می توانیم از یک روش جمع و جور برای این کار استفاده کنیم. روش به این صورت است که ابتدا یک نقطه(.) می گذاریم و سپس از نام کلاس، که در اینجا warnning است، در CSS استفاده می کنیم:

.warning {font-weight: bold;}

وقتی که از کدهای بالا و از این کد CSS در کنار یکدیگر استفاده کنیم، نتیجه به صورت تصویر 2.6 خواهد بود. به این معنا که اعلان font-weight: bold به هر عنصری که خصوصیت class آن حاوی مقدار warning باشد، اعمال می شود. 

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

  1. سلکتور ID
  2. سلکتور خصوصیت یا attribute
  3. سلکتور شبه کلاس(pseudo-class) یا شبه عنصر(pseudo-element)

(تصویر 2.6)

تصویر 2.6

 همان طور که مشاهده می کنید، سلکتور کلاس، با رجوع مستقیم به یک مقدار(value) که در داخل خصوصیت class از یک عنصر قرار گرفته است، ;کار می کند. این ارجاع همواره با یک علامت نقطه(.) شروع می شود که آن را به عنوان یک سلکتور کلاس علامت گذاری می کند. این نقطه کمک می کند تا سلکتور کلاس، از دیگر چیزهایی که ممکن است با آن ترکیب شوند(مانند سلکتورهای عنصر و غیره)، متمایز شود.  بعنوان مثال، ممکن است شما بخواهید وقتی که یک پاراگراف، یک هشدار را تشکیل می دهد، متن آن را پررنگ(bold) کنید، می توانید به صورت زیر عمل کنید:

p.warning {font-weight: bold;}

 اکنون سلکتور بالا، با هر عنصر p که از  کلمه ی warning در خصوصیت class خود استفاده کرده باشد، را مورد تطابق قرار می دهد. (اما نه انواع دیگر عناصر را، چه کلاس گذاری شده باشند یا نه).  چون که عنصر <span> یک پاراگراف نیست، سلکتور بالا نمی تواند آن را مورد تطابق قرار دهد و متن آن به صورت پررنگ(bold) در نمی آید. اگر می خواهید استایل های متفاوتی را به عنصر <span> انتساب دهید، می توانید از سلکتور span.warning استفاده کنید:

p.warning {font-weight: bold;}
span.warning {font-style: italic;}

 در این صورت، پاراگراف هشدار به صورت برجسته یا همان bold نشان داده می شود؛ این در حالی است که، هشدری که در داخل <span>  بود، به صورت ایتالیک نشان داده می شود. هر یک از دستورات بالا، تنها به یک نوع خاص از عناصر و کلاس ها اعمال می شود؛ بنابراین خاص خواهد بود و با عناصر دیگر ارتباطی نخواهد داشت. یک گزینه ی دیگر این است که از ترکیب یک سلکتور کلاس  و یک سلکتور خاص عنصر، برای استفاده ی بهتر از استایل ها استفاده کنیم:

.warning {font-style: italic;}
span.warning {font-weight: bold;}

 

(تصویر 2.7)

 در این صورت، تمام متن هایی که از کلاس warning استفاده می کنند، به صورت ایتالیک در می آیند اما فقط متنی که در داخل یک عنصر <span> قرار دارد و از کلاس warning استفاده می کند، هم به صورت bold نشان داده می شود و هم به صورت ایتالیک نشان داده می شود.

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

!Donate

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال