در این مقاله قصد داریم تا بررسی کنیم که چگونه می‌توانیم رفتار محتوا را با استفاده از استایل‌های سفارشی یا  ID Styleها، کلاس‌های pseudo و inheritance کنترل کنیم. این اتفاق با استفاده از selectorها در CSS انجام می‌شود.

selectorهای CSS المنت‌های HTML را بر اساس نام تگ‌ها، attribute‌ها، class‌ها، IDها یا position آن‌ها در ساختار داکیومنت، مورد هدف قرار می‌دهند. هنگامی که یک selector با یک المنت مطابقت پیدا می‌کند، استایل‌های تعریف شده در CSS مربوطه به آن المنت اعمال می‌شود.

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

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Target elements with a class */
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }

    /* Target elements with an ID */
    #special {
      color: red;
      text-decoration: underline;
    }

    /* Target elements based on their tag name */
    p {
      font-size: 16px;
    }

    /* Target elements based on their relationship */
    ul li {
      list-style-type: square;
    }

    /* Target elements based on attribute values */
    input[type="text"] {
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <h1 id="special">Welcome to my Website</h1>

  <p>This paragraph will have a font size of 16 pixels.</p>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="highlight">List item 3</li>
  </ul>

  <input type="text" placeholder="Enter your name">
</body>
</html>

CSS سفارشی و  ID Styleها

اولین استایلی که داریم نمونه‌ای از selector سفارشی به نام highlightاست.

/* Target elements with a class */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

HTML آن ممکن است به شکل زیر باشد:

<li class="highlight">List item 3</li>

سپس، ID selector (#special):

/* Target elements with an ID */
#special {
  color: red;
  text-decoration: underline;
}

که از طریق ویژگی id=در HTML اعمال خواهد شد:

<h1 id="special">Welcome to my Website</h1>

با توجه به اینکه یک آشناییت کلی با CSS و selectorها داریم، می‎دانیم که ارتباط یک استایل با یک المنت HTML مانند pبه چه صورت کار می‌کند:

/* Target elements based on their tag name */
p {
  font-size: 16px;
}

همینطور شکل رنگ‌آمیزی پس‌زمینه اعمال شده روی تگ‌های <ul>و رنگ border فیلد input متن توسط این دو استایل کنترل می‌شوند:

/* Target elements based on their relationship */
ul li {
  list-style-type: square;
}

/* Target elements based on attribute values */
input[type="text"] {
  border: 1px solid gray;
}

در حال حاضر، علاوه بر بخش‌هایی از HTML که قبلا بررسی کرده‌ایم، می‌توانیم ببینیم که چگونه bullet point سوم دارای ویژگی کلاس highlightاست. بنابراین هم رنگ پس‌زمینه زرد را می‌گیرد و هم پس‌زمینه آن مربع خواهد بود. در نهایت، فیلد <input type="text">یک border خاکستری دریافت خواهد کرد.

<body>
  <h1 id="special">Welcome to my Website</h1>

  <p>This paragraph will have a font size of 16 pixels.</p>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="highlight">List item 3</li>
  </ul>

  <input type="text" placeholder="Enter your name">
</body>

اگر کد را در یک فایل .htmlذخیره کرده و آن را در مرورگر خود لود کنیم، خواهیم دید که همه آن دقیقاً به همان شکلی است که ما می‌خواستیم. همینطور نتیجه کد را می‌توانیم در لینک codePen هم مشاهده کنیم.

نحوه کار با pseudo classها در CSS

نوع دیگری از کلاس در CSS وجود دارد که ما به آن pseudo class می‌گوییم. احتمالاً قبلاً کلاس‌های pseudo را در صفحات وب که از آن‌ها بازدید داشته‌ایم، مشاهده کرده‌ایم. لینک‌ها یا المنت‌های موجود در صفحات، زمانی که اقدامات مختلفی در اطراف آن‌ها اتفاق می‌افتد ظاهر خود را تغییر می‌دهند.

به عنوان مثال، همانطور که از این کد CSS زیر می‌بینیم، تعاریفی برای هر یک از حالت‌های normal، hover، focus و active وجود دارد.

/* Normal state */
button {
  background-color: blue;
  color: white;
}

/* Hover state */
button:hover {
  background-color: lightblue;
}

/* Focus state */
button:focus {
  outline: 2px solid red;
}

/* Active state */
button:active {
  background-color: darkgreen;
}

ما باید استایل‌های CSS را بگیریم و آن‌ها را روی کدهای HTML ساده اعمال کنیم. این مثالی که داریم نشان می‌دهد که چگونه می‌توانیم همه آن حالت‌های را بر روی المنت باتن Click meدر HTML اعمال کنیم.

<button>Click me</button>

اکنون قصد داریم تا نحوه کارکرد آن را باهم بررسی کنیم.

در حالت عادی، المنت باتن ما ممکن است رنگ پس‌زمینه آبی و متن سفید داشته باشد. اما هنگامی که ماوس خود را روی باتن می‌بریم، رنگ پس‌زمینه آن به آبی روشن تغییر پیدا می‌کند:

/* Hover state */
button:hover {
  background-color: lightblue;
}

هنگامی که از کلید Tabروی صفحه کلید خود برای چرخش در میان المنت‌های صفحه استفاده کنیم، هنگامی که به باتنی که داریم می‌رسیم، وضعیت به حالت Focusتبدیل می‌شود و outline به رنگ قرمز تغییر می‌کند:

/* Focus state */
button:focus {
  outline: 2px solid red;
}

و هنگامی که روی باتن کلیک می‌کنیم و نگه می‌داریم، رنگ پس‌زمینه به سبز تیره تغییر می‌کند:

/* Active state */
button:active {
  background-color: darkgreen;
}

خروجی این کد را نیز می‌توانیم در لینک codePen هم مشاهده کنیم.

بررسی Inheritance یا وراثت در CSS

مفهوم وراثت در selectorها در CSS مکانیزمی است که به ویژگی‌هایی که بر روی المنت‌های parent تعریف شده‌اند اجازه می‌دهد تا توسط المنت‌های child آن‌ها به ارث بروند. در نتیجه هنگامی که یک ویژگی روی یک المنت parent تنظیم می‌شود، مقدار آن به طور خودکار توسط childهای آن المنت به ارث می‌رسد مگر اینکه لغو شود.

وراثت بر روی ویژگی‌های مختلف CSS، مانند استایل‌های فونت، رنگ‌های متن و برخی ویژگی‌های layout اعمال می‌شود. به عنوان مثال، اگر font familyیا font sizeرا روی یک المنت parent تنظیم کنیم، المنت‌های child آن مقادیر را به ارث خواهند برد، مگر اینکه این ویژگی‌ها برای آن‌های به صورت جداگانه مقداردهی شود.

در برخی موارد، ویژگی‌های خاصی به طور پیش‌فرض امکان ارث‌بری ندارند. برای مثال، ویژگی‌هایی مانند رنگ پس‌زمینه، ویژگی‌های border و ویژگی‌های box-model معمولاً به ارث نمی‌رسند. در این موارد، المنت‌های child مقادیر را از المنت‌های parent خود به ارث نمی‌برند مگر اینکه این موضوع را به صراحت بیان کنیم.

مفهوم وراثت در CSS این امکان را برای ما فراهم می‌کند تا یک بار ویژگی‌ها را روی المنت‌های parent تنظیم کنیم. در نتیجه، این کار فرآیند استایل‌سازی را ساده‌تر کرده و نیاز به ساختن استایل‌های تکراری در المنت‌های child را کاهش می‌دهد. با این حال، باید آگاهی کامل از این که کدام ویژگی‌ها به ارث رسیده‌اند و کدام‌ها نه داشته باشیم تا بتوانیم به نتیجه مطلوب ظاهری که می‌خواستیم دست پیدا کنیم.

بررسی مثال Inheritance در CSS

کدی که در ادامه داریم یک استایل #parentایجاد می‌کند که فونت و رنگ فونت را تعیین می‌کند. همچنین یک استایل دوم هم ایجاد می‌کند که بر روی پاراگراف‌های داخل HTML اعمال می‌شود. اما این استایل دوم نیز یک childاز parentاست.

<style type="text/css">
#parent {
  font-family: Arial, sans-serif;
  color: blue;
}
p {
  font-size: 24px;
}
</style>

در بخش HTML یک <div>داریم که از ویژگی id=برای دریافت استایل parentاستفاده می‌کند. همینطور دو خط متن وجود دارد، یکی در داخل تگ <p>و دیگری در خارج آن.

<div id="parent">
  Here is some regular text.
  <p>This is a paragraph inside the parent element.</p>
</div>

وقتی کد خود را در مرورگر لود می‌کنیم، می‌بینیم که هر دو خط متن به رنگ آبی چاپ می‌شوند. به این معنی که المنت childدر واقع، مقادیر parent را پذیرفته است. اما قالب‌بندی فونت بزرگ‌تر مربوط به خود را نیز دریافت کرده است. این نوع قالب‌بندی زمانی می‌تواند قدرتمند باشد که بخواهیم رفتار کلی و global را به دقت کنترل کنیم و در عین حال توانایی المنت‎‌ها برای داشتن تعاریف انفرادی بیشتر را حفظ نماییم. در این بخش نیز می‌توانیم نتیجه کد را در لینک codePen مشاهده کنیم.

برای جلوگیری از وراثت و ایجاد یک مقدار کاملاً جدید، می‌توانیم از کلمه کلیدی inheritبرای نادیده گرفتن مقدار ارثی استفاده کنیم. علاوه بر این، می‌توانیم از کلمه کلیدی initial برای بازنشانی یک ویژگی به مقدار پیش‌فرض آن استفاده نماییم.

یک نکته مهم دیگر وجود دارد و اهمیت آن زمانی که با چندین استایل CSS سروکار داریم، بیشتر می‌شود. وقتی بین  inline CSS، چندین فایل مستقل CSS و لایه‌های parentها و childها، تضاد بین استایل‌ها وجود داشته باشد، در این صورت چه اتفاقی می‌افتد؟ در این شرایط یک سری قوانین وجود دارد که تعیین می‌کند هر مورد چگونه باید اجرا و کنترل شود.

کد inline  درون تگ‌های <style>یک فایل HTML همیشه در اولویت بالاتر قرار می‌گیرد. هرچه یک selector خاص‌تر باشد، اولویت آن بیشتر است. هر چه یک استایل در کد پایین‌تر ظاهر شود، اولویت بیشتری به آن داده می‌شود. و در نهایت ویژگی !importantهمیشه بالاترین اولویت را دارد.

اولویت‌بندی Ruleها در CSS

در این بخش یک خلاصه سریع از اولویت‌بندی ruleها در CSS را داریم:

جمع‌بندی

در این مقاله سعی کردیم تا با نحوه کار selectorها در CSS بیشتر آشنا شویم. همینطور روش سفارشی‌سازی استایل‌های CSS از طریق ویژگی‌هایی مانند idو ساختارهایی مانند کلاس‌های pseudo را باهم بررسی کردیم. همچنین دیدیم که مفهوم وراثت CSS چگونه می‌تواند به ما کمک کند تا بتوانیم نحوه رفتار آبجکت‌ها در صفحات وب را کنترل کنیم.