مقدمه ای بر سلکتورهای CSS

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

گزینشگرهای CSS این امکان را بوجود می آورد که عناصر خاص در یک سند HTML را مورد هدف قرار دهیم.

همانطور که احتمالا می دانید، CSS دارای یک ترکیب خاص است که برای شناسایی توسط مرورگرهای وب مورد نیاز است:

سلکتور، عنصری را که شما می خواهید تغییر دهید را نشان می دهد. property (صفت) ویژگی عنصری را که می خواهید تغییر دهید را نشان می دهد (به عنوان مثال، رنگ، قد، فونت)، و value (ارزش) میزان و چگونگی تغییری که می خواهید انجام دهید را بیان می کند (به عنوان مثال، رنگ، تعداد پیکسل ها یا حروف) .

سلکتورهای عنصر

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

 p { 
 color: red;
}

سلکتور های والد و فرزند

سلکتور های والد وفرزند را می توان برای انتخاب عناصر خاص موجود در عنصر دیگر استفاده کرد. به عنوان مثال، برای انتخاب تمام آیتم های لیست (li) در لیست نامرتب (ul) در سند HTML ، می توانید به شکل زیر عمل کنید:

 ul li {
 border-bottom: 1px gray solid;
} 

سلکتورهای زیر را می توانید با سلکتورهای دیگر نیز ترکیب کنید.

سلکتورهای class و id

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

.spaghetti {
 background-color: green;
}

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

#fusilli {
background-color: yellow;
}

شایان ذکر است که در HTML معتبر، هیچ دو عنصردارای یک ID نمی شوند (id منحصر به یک عنصر است!)

سلکتور CSS زنجیره ای

سلکتور CSS زنجیره ای به شما اجازه می دهد، عناصر سند HTML خود را با دو یا چند کلاس اختصاص یافته به آن مورد هدف قرار دهید. به عنوان مثال، برای انتخاب تمام عناصر با یک دارای هر دو کلاس 'spaghetti' و 'penne' باید به شکل زیر عمل کنید:

 .spaghetti.penne {
 background: blue;
 }

توجه داشته باشید که هیچ فاصله ای بین دو کلاس بالا وجود ندارد.

سلکتور Adjacency

سلکتور مجاورت به شما اجازه می دهد تا عناصری که در مجاورت (در کنار) یکدیگر هستند را هدف قرار دهید. به عنوان مثال، برای انتخاب تمام پاراگراف ها که بلافاصله به دنبال یک عنصر H1 آمده اند، می توانید از CSS زیر استفاده کنید:

 h1 + p {
 color: blue;
 }

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

سلکتورهای هم نژاد کلی

سلکتور General sibling تقریبا شبیه به سلکتور مجاورت که در بالا توضیح داده شد، عمل می کند با این تفاوت که عمومیت بیشتری دارد. تصور کنید که HTML زیر در سند شما موجود است:

 <article>
 <p>Spaghetti</p>
 <p>Fusilli</p>
 <div>Penne</div>
 <p>Tagliatelle</p>
 </article>

از css زیر باید استفاده کنید برای انتخاب تمام پاراگراف ها در طراحی سایت :

1. article p ~ p {
2. color: red;
3. }

سلکتور کودک

سلکتور کودک CSS می تواند برای هدف قرار دادن فقط عنصر فرزند سطح اول در عناصر تو در تو مورد استفاده قرار گیرد:

 ul > li {
 font-weight: bold;
 }

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

سلکتورهای ویژگی

سلکتور های Attribute ، یک راه به شدت قدرتمند برای هدف قرار دادن عناصر با ویژگی های خاص هستند و تقریبا چند راه برای مطابقت عناصر با سلکتور Attribute وجود دارد.

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

 input[style] {
 display: inline;
 }

در مثال فوق تمام عناصر ورودی از هر نوع که دارای یک ویژگی سبک هستند، مطابقت پیدا می کنند.

شما همچنین می توانید عناصری را که دارای یک ویژگی با مقدار دقیق هستند را با استفاده از ترکیب CSS زیر تطبیق دهید:

 input[type="password"] {
 background: yellow;
 }

انواع دیگری از این نوع سلکتور نیز وجود دارد که در حوصله این بحث نمی گنجد.
همانطور که می بینید طیف گسترده ای از سلکتورهای CSS برای انتخاب وجود دارند. و به نظر می رسد در CSS4 سلکتورهای بیشتری معرفی شده است.