انتخابگرها در CSS

هنگام استایل دهی به عناصر مختلف به روش Internal یا External ابتدا باید عنصری که قصد دارید به آن استایل دهید را انتخاب نمایید که به آن اصطلاحاً CSS Selector گفته می شود. تنظیمات (استایل) هر Selector بین علامت های { } قرار گرفته و پایان هر تنظیمات نیز مانند دستورات جاوا اسکریپت و سی شارپ علامت ; قرار می گیرد.

Id Selector

هنگامی که قصد داشته باشید تنظیمات برای تنها یک عنصر اعمال شود ابتدا باید برای عنصر مورد نظر در تگ html یک id تعیین کرده و در بخش css توسط id selector استایل آن را اعمال نمایید. نشانه id selector در css علامت # می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #p1 {
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p id="p1">Welcome to Beno</p>
  </body>
</html>

Class Selector

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

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      .red {
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p class="red">Welcome to Beno</p>
    <p class="red">Enjoy Learning Css</p>
  </body>
</html>

Tag Selector

اگر قصد داشته باشید استایلی به تمامی تگ هایی از یک نوع اعمال کنید می توانید از Tag Selector استفاده نمایید. در این روش تنها ذکر نام تگ کافی می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      p{
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p>Welcome to Beno</p>
    <p>Enjoy Learning Css</p>
  </body>
</html>

Attribute Selector

مثال فرم ها را نظر بگیرید که در بخش آموزش  HTML به آن پرداخته شد. در آن مثال اگر قصد داشته باشید استایلی را توسط Tag Selector به تگ های input اعمال کنید، دکمه هایی که در فرم به وسیله زیر نوشته شده اند نیز تحت تأثیر قرار خواهند گرفت.

<input type="button" value="Register" />

در حالیکه ممکن است شما تنها برای input های ورود اطلاعات مانند نام و نام خانوادگی قصد داشته باشید استایلی اعمال کنید. در این شرایط می تواند با توجه به مقدار یا محتوای یک attribute، استایلی به آن اعمال نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      input[type='text']{
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
      <input type="text" />
      <input type="button" value="Register" />
  </body>
</html>

در این مثال با آنکه هر دو تگ از نوع input می باشند اما تنظیمات تنها بر روی text اعمال خواهد شد.

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

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

تحلیل: در این مثال برای عناصری که تنظیمات مشترک دارند می توان از کلاس و برای عنصری که تنظیماتش منحصربفرد می باشد می توان از id استفاده نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
        .red{
            color: red;
        }
        #violet{
            color: violet;
        }
        .blue{
            color: blue;
        }
    </style>
  </head>
  <body>
      <p class="red">Welcome to Beno Academy</p>
      <p class="red">I hope you enojoy!</p>
      <p id="violet">In this Site you can learn everything.</p>
      <p class="blue">Programming</p>
      <p class="blue">Web Designing</p>
  </body>
</html>

پس ذخیره و اجرای صفحه، نتیجه اجرا به شکل زیر خواهد بود.

انتخابگرها در css