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

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

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

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

Selector یا انتخابگر با استفاده از نام تگ

در این روش با استفاده از نام تگ HTML به عنصر مورد نظر دست پیدا می کنیم.

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

کد HTML:

<p>txt</p>

کد CSS:

p {

}

Selector یا انتخابگر با استفاده از id

در روش قبلی با استفاده از نام تگ، تمام تگ های پاراگراف یا p را انتخاب کردیم ولی گاهی اوقات لازم است از بین این همه عناصر فقط یک تگ p را مدیریت کنیم. در این روش با استفاده از صفت id در HTML شناسه یکتا و غیر تکراری را برای عنصر مورد نظر انتخاب می کنیم.

کد HTML:

<p id="start">txt</p>

کد CSS:

#start {

}

در مثال بالا تگ پاراگرافی را با id یا شناسه start ایجاد کردیم.

برای دسترسی به عنصر با id مورد نظر در CSS ابتدا علامت # و سپس نام id را می نویسیم:

#start {

}

در صورت اختیار می توانید نام تگ و سپس نام id را بنویسید.

مثال زیر یعنی تگ p با id که مقدارش start است.

p#start {

}

این نکته را به خاطر بسپارید که حتما باید id یکتا و غیر تکراری باشد و نباید چند عنصر را با id یکسان و تکراری انتخاب کرد.

Selector یا انتخابگر با استفاده از class

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

برای این کار از صفت class در HTML استفاده کرده و با استفاده از علامت نقطه . در CSS مجموعه از عناصر مورد نظر را انتخاب می کنیم.

کد HTML:

<p class="object">txt 1</p>
<p class="object">txt 2</p>
<p class="object">txt 3</p>
<p class="object">txt 4</p>
<p class="object">txt 5</p>

کد CSS:

.object {

}

در مثال فوق یعنی تمام عناصری که نام کلاسشان برابر با object بود را انتخاب کن.

به طور خلاصه با استفاده از کلاس می توانید مجموعه ای از عناصر مورد نظر در HTML را با استفاده از CSS مدیریت کنید.

انتخابگر بر اساس فرزندان عناصر

در این روش با استفاده از نام تگ و شبه کلاس nth-child به فرزندان عنصر مورد نظر دست پیدا می کنیم.

کد HTML:

<p>txt 1</p>
<p>txt 2</p>
<p>txt 3</p>
<p>txt 4</p>
<p>txt 5</p>

کد CSS:

p:nth-child(1) {

}

در مثال فوق پنج تگ p قرار دارد و برای دسترسی به عضو اول یا فرزند اول، مقدار nth-child را برابر با 1 قرار دادیم.

دسترسی بر اساس عضوهای فرد:

p:nth-child(odd) {

}

دسترسی بر اساس عضوهای زوج:

p:nth-child(even) {

}