با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

ویژگی های css یا Css Specificity یک سری قوانین و خصوصیات مختص css هستند.

Specificity به معنای مشخص و دقیق بودن است.

امروز و در آخرین مبحث از سری آموزش های css، درباره ویژگی های که مختص css هستند؛ و حین کدنویسی به عنوان نکات طلایی در اختبار شما هسند، صحبت خواهیم کرد.

همراه ما باشید.

Specificity چیست؟

همانطور که در مقدمه گفته شد، کلمه Specificity به معنای دقیق و مشخص بودن است.

اگر مروری به آموخته های گذشته باشیم، خواهیم دید  که در css این امکان وجود داردکه برای یک عنصر خاص تعداد بیش از یک قانوان را وضع کرده باشیم.

و ویژگی های زیادی را برای یک عنصر تعیین کرده باشیم.

حتی گاهی ممکن است این تعاریف و قانون ها در تعارض با یکدیگر باشند!

در این حالت css باید کدام قانون را اجرا کند؟

چه زمانی و به چه شکلی ان را اجرا کند؟!

در چنین حالتی بحث Specificity به کمک css می آید.

این گزینه به مرورگر کمک می کند که بهنرین و درست ترین حالت عناصر را نمایش دهد.

می توان Specificity را به عنوان درجه یا رتبه ای که تعیین می کند در نهایت چه استایل و سبکی روی عنصر اعمال شود ، در نظر گرفت.

برای مثال، انتخابگر selector سراسری (*) از مشخصه Specificity کمی برخوردار است(یعنی رتبه و اولویت کمتری دارد) و در عوض انتخابگرهای ID رتبه و اولویت خاصی دارند.

نکته!

دلیل اصلی اینکه چرا گاهی برخی قوانینی که شما در CSS برای عناصر وضع کرده اید، و آنها عمل نمی کنند (در حالیکه از نظر شما باید اعمال شوند و  کدنویسی شما درست بوده است!) همین ویژگی Specificity است.

سلسله مراتب درSpecificity 

هر انتخابگری در سلسله مراتب ، جایگاه خودش را دارد.

در کل چهار دسته بندی برای مشخص کردن سطح و اولویت انتخابگرها وجود دارد:

• inline styles: استایل های درون خطی : یک استایل درون خطی، مستقیما و در حهمان محل کدنویسی عنصر، به آن عنصر اعمال می شود. مثال :<;”h1 style=”color: #ffffff> تغییر رنگ عنصر h1 در همان خط تعریف عنصر
• IDs: آی دی ها: یک آی دی، یک شناسه منحصر به فرد برای هر عنصر صفحه است. مثال navbar#
• Classes, attributes and pseudo-classes : کلاس ها، صفات و شبه کلاس ها : این دسته بندی شامل .کلاس ها ، [صفات] ، و شبه کلاس ها می باشد. مانند  hover: , focus: و…
• Elements and pseudo-elements : عناصر و شبه عناصر : این دسته بندی شامل های نام های عنصر، وشبه عناصر می باشد. عناصر مانند : h1, div و شبه عناصر مانند before: و after:

چطور specificity را محاسبه کنیم؟

برای جلوگیری از بروز مشکل و اختلال در اجرای قوانینی که برای css در وب سایتتان وضع کرده اید، محاسبه specificity را به خاطر بسپارید.

ما برای شما یک راه پیشنهادی داریم!

از0 (صفر) شروع کنید. و تا عدد 1000 برای استایل دهی صفات (style attribute) در نظر بگیرید. (یعنی از 0تا1000 را به استایل دهی صفات احتصاص دهید)

سپس برای هر ID (آی دی) ، 100 واحد را در نظر بگیرید.

در مرحله بعد ، برای صفت، کلاس یا شبه کلاس، 10 واحد در نظر بگیرید.

و در نهایت برای عناصر یا شبه عناصر، 1واحد را در نظر بگیرید.

[php]

A: h1
B: #content h1
c:

[/php]

به مثال زیر توجه کنید و این سه بخش کد را در نظر بگیرید:

طبق راه حل پیشنهادیی که در بالا گفتیم، مقدار specificity برای A که یک عنصر است، 1 می باشد.

مقدار specificity برای B که یک آی دی است و یک عنصر به همره دارد ، 101 می باشد.

و مقدار specificity برای C که یک استایل درون خطیاست، 1000 می باشد.

قوانین Specificity

اگر Specificityها برابر باشند، آخرین قانون به عنوان ملاک عمل در نظر گرفته می شود.

اگر یک قانون، دو بار در استایل خروجی نوشته شده باشد،پایین ترین قانون در برگه استایل ها (style sheet) که در متن کدنویسی، به عنصر نزدیکتر است به عنوان ملاک الی در نظر گرفته خواهد شد.

برای درک بهتر این مسئله به مثال زیر دقت کنید.

[php]
h1 {background-color: yellow;}
h1 {background-color: red;}
[/php]

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

نتیجه را ببینید:

انتخاب کننده های ID ، در مقایسه با انتخاب کننده های صفات ، Specificity بالاتری دارند.

به کد زیر دقت کنید.

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

اولین قانون ، نسبت به دو قانون دیگر، اولوین بالاتری دارد و در نتیجه اولین قانون اجرا خواهد شد.
نتیجه را ببینید.

انتخاب کننده های  متنی اولویت بالاتری نسبت به انتخاب کننده عنصر دارند.

برگه استایل(Style Sheet) تعبیه شده که به عنصر نزدیکتر است اجرا می شود.

بنابراین به کد زیر دقت کنید:

[php]
From external CSS file:
#content h1 {background-color: red;}

In HTML file:
In HTML file:
//درون تگ استایل//
#content h1 {
background-color: yellow;
}

[/php]

قانون دوم اجرا خواهد شد.

انتخاب کننده کلاس از هر انتخاب کننده عنصری اولویت بالاتری دارد.

اولویت یک کلاس مانند .intro ، از تمام عناصری مانند  h1, p, div بالاتر است.

[php]

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

[/php]

نتیجه را ببینید.

انتخاب کننده سراسری و مقادیر ارثی ، ویژگی specificity برابر با 0 دارند.

* ، body * و موارد مشابه دارای ویژگی صفر هستند. مقادیر ارثی همچنین ویژگی 0 را دارند.