site-logo site-logo
CSS - حداکثر اندازه در خط (Max Inline Size)
نوشتن نظر کلیک کنید

CSS – خاصیت (Specificity)

Last Update: 

مفهوم Specificity در CSS

Specificity به معنای اولویت‌بندی قوانین CSS برای اعمال به یک عنصر است. وقتی چندین قانون CSS برای یک عنصر مشخص اعمال شوند، مقدار specificity تعیین می‌کند کدام قانون برنده خواهد شد و به عنصر اعمال می‌شود.

Specificity به عنوان یک امتیاز/رتبه عمل می‌کند و تعیین می‌کند که کدام قانون CSS به عنصر نهایی اعمال شود.

مثال 1: استفاده از عنصر “p” به عنوان سلکتور

در این مثال، رنگ متن به رنگ قرمز تنظیم شده است:

<html>
<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

مثال 2: استفاده از کلاس

با اضافه کردن کلاس، رنگ متن سبز خواهد شد، زیرا کلاس‌ها اولویت بیشتری نسبت به عناصر دارند:

<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p class="test">Hello World!</p>
</body>
</html>

مثال 3: استفاده از ID

با استفاده از ID، رنگ متن آبی می‌شود، زیرا ID نسبت به کلاس‌ها اولویت بیشتری دارد:

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p id="demo" class="test">Hello World!</p>
</body>
</html>

مثال 4: استفاده از استایل Inline

استایل‌های Inline همیشه اولویت بیشتری دارند، بنابراین رنگ متن صورتی خواهد شد:

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

سلسله مراتب Specificity

هر سلکتور CSS دارای یک سطح در سلسله مراتب specificity است. چهار دسته اصلی برای تعیین سطح specificity وجود دارد:

  1. استایل‌های Inline: مثال: <h1 style="color: pink;">
  2. IDها: مثال: #navbar
  3. کلاس‌ها، شبه‌کلاس‌ها و سلکتورهای صفات: مثال: .test, :hover, [href]
  4. عناصر و شبه‌عناصر: مثال: h1, ::before

محاسبه Specificity

برای محاسبه specificity، از صفر شروع کنید:

  • برای هر ID، عدد 100 را اضافه کنید.
  • برای هر کلاس، شبه‌کلاس یا سلکتور صفات، عدد 10 را اضافه کنید.
  • برای هر عنصر یا شبه‌عنصر، عدد 1 را اضافه کنید.

نکته: استایل‌های Inline مقدار specificity معادل 1000 دارند و همیشه بالاترین اولویت را خواهند داشت.

نکته ۲: استفاده از قانون !important حتی از استایل‌های Inline هم بالاتر خواهد بود.

قوانین بیشتر Specificity

تساوی در Specificity: آخرین قانون برنده می‌شود اگر دو قانون یکسان در فایل CSS وجود داشته باشند، آخرین قانون اعمال می‌شود:

h1 {background-color: yellow;}
h1 {background-color: red;}

سلکتورهای ID نسبت به سلکتورهای صفات اولویت دارند: در این مثال، اولین قانون به دلیل اولویت بیشتر اعمال خواهد شد:

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

سلکتورهای Contextual نسبت به سلکتورهای تکی اولویت دارند: اگر یک استایل در فایل HTML تعریف شود، آن استایل نسبت به استایل‌های تعریف شده در فایل خارجی اولویت دارد:

/* از فایل خارجی: */
#content h1 {background-color: red;}

/* در فایل HTML: */
<style>
#content h1 {background-color: yellow;}
</style>

سلکتور کلاس از هر تعداد سلکتور عنصر قوی‌تر است:

.intro {background-color: yellow;}
h1 {background-color: red;}

سلکتور عمومی (*) و مقادیر ارث‌برده‌شده دارای مقدار Specificity صفر هستند: سلکتور عمومی و مقادیر ارث‌برده‌شده نادیده گرفته می‌شوند و Specificity ندارند.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.