CSS Specificity: اختصاصی بودن در سی اس اس-قسمت اول

CSS Specificity: اختصاصی بودن در سی اس اس-قسمت اول

یکی از مشکل ترین مباحث در CSS است. زمانی که به یک المنت خاص در HTML (مثلا <p>) دو دستور سی اس اس (CSS) متفاوت (مثلا دو background یکی آبی و یکی قرمز) می دهید، مرورگر با توجه به CSS Specificity تصمیم می گیرد که کدام دستور را اجرا کند.

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

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

تعاریف اولیه

در اچ تی ام ال (HTML) به هر یک از علایمی که با علامت های بزرگتر و کوچکتر (> و <) مشخص می شوند، المنت می گویند. مانند: <p> ، <div> و ...

در سی اس اس (CSS) نیز ساختار کلی به این شکل است:

selector { property:value; }

مانند:

p { background:red; }

در بالا به متونی که خارج از علامت آکولاد قرار دارند سلکتور (selector = انتخابگر) می گویند. زیرا شما با استفاده از آنها، از داخل سی اس اس می توانید یک المنت اچ تی ام ال را انتخاب کنید و به آن استایل بدهید (style به دستورات سی اس اس یا همان property و value در مثال بالا گفته می شود).

سلکتورها انواع مختلفی دارند:
- آی دی (ID selector) مانند: section#
- کلاس (class selector) مانند: section.
- المنت (contextual selector) مانند: p span
- اتریبیوت (attribute selector) مانند: [p[title

- سودوکلاس ها (Pseudo-classes = کلاس های کاذب) که برای اضافه کردن افکت های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند زیر:

selector:pseudo-class { property:value; }

در زیر مثال هایی از سودوکلاس ها آورده ایم:

a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

focus: در input:focus که فیلدی را که مکان نما داخلش است را انتخاب می کند.
(lang(language: در (p:lang(it
first-child: در p:first-child که به اولین المنت های p در داخل المنت والدش اشاره می کند. در مثال زیر المنت های p نقش فرزند و المنت div نقش والد را دارد.

<div> <p>First<p></p> <p>Second<p></p> <p>Third<p></p> </div>

- سودوالمنت ها (Pseudo-elements = المنت های کاذب) که برای اضافه کردن افکت های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند first-line: یا after: در مثال های زیر:

p:first-line { font-variant: small-caps; } a:link:after { content: " (" attr(href) ")"; }

تفاوت pseudo-class و pseudo-element

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

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

در زیر مثال هایی از سودوالمنت ها آورده ایم:

first-letter: در p:first-letter که اولین حرف را در المنت های <p> هدف می گیرد.
first-line: در p:first-line که به اولین خط در المنت های <p> در اچ تی ام ال اشاره می کند.
before: در p:before
after: در p:after

Style attribute: معنی تحت الفظی آن «صفت های استایلی» است. گفتیم که استایل به دستورات سی اس اس (CSS) گفته می شود. منظور از «استایل اتریبیوت» همان استایل هایی هستند که به عنوان اتریبیوت داخل المنت های HTML داده می شوند. مثلا:

<h1 style="color: #fff;">

اتریبیوت (attribute = صفت): برای توضیح آسان تر مثال می زنیم.

<a href="http://noorportal.ir" title="noorportal" target="_blank" id="content" class="content texts" style="height:200px; width:200px;">noorportal</a>

در مثال بالا به هر یک از href، title، target، id، class و style ها اتریبیوت می گویند. هر یک از اینها صفتی از المنت a هستند. در سی اس اس با اتریبیوت های id و کلاس بسیار کار می کنیم. اما می توانید با دیگر اتریبیوت ها نیز کار کنید. مانند مثال های زیر:

[title=W3Schools] { border:5px solid green; }

کد بالا تمام المنت هایی که دارای title=W3Schools باشند را هدف می گیرد.

[title] { color:blue; }

کد بالا تمام المنت هایی که دارای اتریبیوت title باشند را هدف می گیرد.

[title=W3Schools] { border:5px solid green; }

کد بالا تمام المنت هایی که دارای title=W3Schools باشند را هدف می گیرد.

این اتریبیوت، آنهایی را که داخل title شان کلمه hello داشته باشند را هدف می گیرد. مثلا title=good hello to you

علامت پایپ (| = لوله = pipe) در زمان هایی که بین مقادیر علامت (- = hyphen = خط فاصله) وجود داشته باشد، تمام آنها را با مقدار داده شده مقایسه می کند. به عبارت دیگر دستور بالا چیزی مانند <html lang=en-us> را هدف می گیرد.

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }

دستورات بالا در زمانی که نخواهید به تمام المنت های فرم ها کلاس یا آی دی (id) بدهید بسیار مفید هستند.

توجه کنید که دستورات اتریبیوت، بعضی از سودوکلاس ها و سودو المنت ها در اینترنت اکسپلوررهای ۸ و قدیمی تر کار نمی کنند.

همان طور که دیدید، تمام این مقاله صرف توضیح اصطلاحات اولیه شد. در مقاله بعد به توضیح مفصل مبحث specificity خواهیم پرداخت.