آموزش برنامه نویسی وب🌐: بخش css قسمت دوم (انتخابگر ها یا selectors)

در این قسمت از سری آموزش برنامه برنامه نویسی وب به انتخابگر ها و syntax دستورات در سی اس اس (CSS) خواهیم پرداخت.

قسمت قبلی (شروع به کار)

ساختار یا syntax دستورات css

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

انتخابگر (Selector): برای انتخاب عناصری HTML.
ویژگی (Property): خصوصیتی که می‌خواهید برای عنصر تغییر دهید (مثل رنگ، فونت، اندازه و غیره).
مقدار (Value): مقدار ویژگی که تعیین می‌کنید.

ساختار کلی کد بصورت زیر است.


انتخابگر {
    property: value; /* ویژگی: مقدار */
    property: value; /* ویژگی: مقدار */
}

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


p {
   color: red;
}

نکته: در یک انتخابگر میتوان چند ویژگی تعریف کرد که با ; از همدیگر جدا میشوند.

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

انتخابگرها (Selectors) در CSS ابزارهایی هستند که به شما این امکان را می‌دهند تا عناصر مختلف HTML را برای اعمال استایل‌ها شناسایی و انتخاب کنید.

به عبارت ساده‌تر، انتخابگرها به CSS می‌گویند که کدام عناصر HTML را باید استایل‌دهی کنید.

این انتخابگرها می‌توانند به صورت تکی یا ترکیبی از چندین نوع مختلف باشند تا هدف‌گذاری دقیق‌تری انجام دهند.

۱. انتخابگر نوع (Type Selector)

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

h1 { color: blue; }

در این مثال، رنگ تمام تگ‌های <h1> به رنگ آبی تغییر می‌کند.

۲. انتخابگر کلاس (Class Selector)

انتخابگر کلاس، بر اساس کلاس تعریف‌شده برای یک عنصر انتخاب می‌کند. کلاس‌ها با نقطه (.) مشخص می‌شوند.

.intro { font-size: 18px; color: green; }

در این مثال، هر عنصری که کلاس intro را داشته باشد، رنگ سبز و اندازه فونت ۱۸ پیکسل خواهد داشت.

۳. انتخابگر شناسه (ID Selector)

انتخابگر شناسه، برای هدف‌گذاری به عنصرهایی استفاده می‌شود که دارای شناسه (ID) خاص هستند. شناسه‌ها با علامت # مشخص می‌شوند.

#header { background-color: yellow; text-align: center; }

در این مثال، عنصر با شناسه header پس‌زمینه زرد و متن وسط‌چین خواهد داشت.

۴. انتخابگر فرزندان مستقیم (Child Selector)

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

div > p { color: red; }

در این مثال، فقط پاراگراف‌هایی که فرزند مستقیم یک <div> هستند، رنگ قرمز خواهند گرفت.

۵. انتخابگر فرزندان (Descendant Selector)

این انتخابگر به تمامی فرزندان یک عنصر اعمال می‌شود، چه فرزند مستقیم یا غیرمستقیم. انتخابگر فرزندان با یک فاصله نوشته می‌شود.

div p { color: green; }

در این مثال، تمام پاراگراف‌هایی که داخل یک <div> قرار دارند، رنگ سبز خواهند داشت.

۶. انتخابگر خواهر مجاور (Adjacent Sibling Selector)

این انتخابگر برای انتخاب یک عنصر که بلافاصله بعد از یک عنصر دیگر قرار دارد استفاده می‌شود. این انتخابگر با علامت + مشخص می‌شود.

h1 + p { color: blue; }

در این مثال، فقط پاراگرافی که بلافاصله بعد از یک <h1> می‌آید، رنگ آبی خواهد گرفت.

7. انتخابگر گروهی (,)

این انتخابگر اجازه می‌دهد چندین المان مختلف را با یک استایل هدف قرار دهید.


h1, p {
  color: purple;
}

8. انتخابگر عمومی هم‌سطح (~)

انتخابگر ~ تمامی عناصر هم‌سطح که بعد از یک المان مشخص در ساختار HTML قرار گرفته‌اند را هدف قرار می‌دهد.

این انتخابگر برخلاف انتخابگر +، فقط به اولین عنصر هم‌سطح بعدی محدود نیست و تمام عناصر بعدی را استایل‌دهی می‌کند.


<p class="first">اول</p>
<p class="second">دوم</p>
<p class="third">سوم</p>



.first ~ p {
  color: orange;
}

انتخابگر یونیورسال (Universal Selector)

تمامی المان‌ها را هدف قرار می‌دهد.


* {
  margin: 0;
  padding: 0;
}

انتخابگر ویژگی (Attribute Selector)

المان‌هایی که دارای یک ویژگی خاص هستند را هدف قرار می‌دهد:

انتخابگر	توضیح	مثال
`[attr]`	هر المانی که ویژگی خاصی دارد.	`[type] { color: red; }`
`[attr=value]`	ویژگی برابر مقدار خاصی باشد.	`[type="text"] { color: blue; }`
`[attr~=value]`	ویژگی شامل مقدار خاصی باشد (فضا جداکننده).	`[class~="btn"] { font-weight: bold; }`
`[attr\|=value]`	ویژگی با مقدار مشخص یا مقدارهای شروع‌شده با آن مقدار باشد.	`[lang\|="en"] { color: green; }`
`[attr^=value]`	مقدار ویژگی با مقدار خاص شروع شود.	`[href^="https"] { color: blue; }`
`[attr$=value]`	مقدار ویژگی با مقدار خاص پایان یابد.	`[src$=".jpg"] { border: 1px solid; }`
`[attr*=value]`	مقدار ویژگی شامل مقدار خاصی باشد.	`[title*="tooltip"] { color: red; }`

انتخابگرهای شبه‌کلاس (Pseudo-classes Selectors)

انتخابگر	توضیح	مثال
`:hover`	وقتی موس روی عنصر قرار می‌گیرد.	`a:hover { color: red; }`
`:focus`	وقتی عنصر در حالت فوکوس باشد.	`input:focus { border: 2px solid blue; }`
`:nth-child(n)`	المانی که nth فرزند باشد.	`li:nth-child(2) { color: green; }`
`:nth-of-type(n)`	nth المان از نوع خاص.	`p:nth-of-type(1) { color: red; }`
`:first-child`	اولین فرزند یک المان.	`p:first-child { font-weight: bold; }`
`:last-child`	آخرین فرزند یک المان.	`p:last-child { font-style: italic; }`
`:not(selector)`	عناصری که با انتخابگر داده‌شده مطابقت ندارند.	`div:not(.box) { color: gray; }`

تمرین

برای تمرین، کدهای زیر را ویرایش کنید و نتیجه تغییرات را مشاهده کنید:

یک عنصر <ul> اضافه کنید و برای هر <li> استایل متفاوتی بر اساس موقعیت آن تعریف کنید.
استفاده از انتخابگرهای ترکیبی مانند فرزند مستقیم و خواهر مجاور را امتحان کنید.

قسمت بعدی