Omega Programming

css selectors

selector (انتخابگر)

همانطور که گفتیم CSS ها اجازه می دهند یک عنصر HTML را انتخاب و دستکاری نمایید. Selector ها برای یافتن (انتخاب) عناصر HTML بر اساس id, class, type, attributeو ... استفاده می شوند.

 element Selector (انتخابگر عناصر)

 در مثال زیر یک element selector را خواهید دید که عناصر را بر اساس نامشان انتخاب می کند.element selector مثال زیر تمام عناصر <p> در صفحه را انتخاب می کند، متن آنها را قرمز رنگ و ترازبندی آنها را وسط چین می نماید.

p {
    text-align: center;
    color: red;
}

id Selector

idselector از خصیصه id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می کند. یک id در یک صفحه باید منحصر بفرد باشد، بنابراین برای انتخاب یک عنصر منحصر بفرد (نه همه عناصر) از idselector استفاده می شود. برای انتخاب یک عنصر با id خاص یک علامت # و به دنبال آن id عنصر مورد نظر نوشته می شود. مثال زیر هر عنصر HTML با خصیصه id="para1" را انتخاب می کند.

#    para1 {
    text-align: center;
    color: red;
  }

نکته: نام یک id را با عدد شروع نکنید.

 class Selector

 class Selector عناصری که خصیصه class آنها دارای مقدار مشخصی است را انتخاب می کند. برای انتخاب عناصری با یک کلاس خاص یک علامت (.) و بعد از آن نام کلاس مورد نظر نوشته می شود. مثال زیر همه عناصر HTML با خصیصه class="center" را بصورت وسط چین ترازبندی می کند.

 .center {
    text-align: center;
    color: red;
}

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

<p class="center"> متن پاراگراف وسط چین و قرمز خواهد شد </p>

<h2 class="center"> متن تیتر وسط چین و قرمز خواهد شد </h2>

همچنین می توانید تعیین کنید که فقط عناصر HTML خاصی باید تحت تاثیر یک کلاس قرار بگیرند. در مثال زیر همه عناصر <p> که در آنها خصیصه class="center" می باشد، بصورت وسط چین ترازبندی می شوند.

 p.center {
    text-align: center;
    color: red;
}

نکته: نام یک class را با عدد شروع نکنید.

با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:

p.black {color: black}
p.red {color:red}

 در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه"class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه"class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:

 <p class="black"> این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class="red"> این متن به رنگ قرمز نمایش داده می شود.</p>

 

گروه بندی Selector ها

 اگر Selector ها تعریف style یکسانی داشته باشند، مانند مثال زیر:

h1 {
   
text-align: center;
    color:
red;

}

h2 {
   
text-align: center;
    color: red;
}

p {
   
text-align: center;
    color: red;
}


در چنین حالتی برای کاهش میزان کدنویسی می توان selector ها را گروه بندی کرد. برای اینکار کافیست selector ها را با کاما از هم جدا کنید. به صورت زیر:

 

h1, h2, p {
    text-align: center;
    color: red;
}

شما اینجا هستید: صفحه ی اصلی آموزش ها آموزش CSS آموزش CSS css selectors