انتخابگرها در 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 زیر باید استفاده کنید برای انتخاب تمام پاراگراف ها در طراحی سایت:
article p ~ p {
color: red;
}
سلکتور کودک
سلکتور کودک CSS می‌تواند برای هدف قرار دادن فقط عنصر فرزند سطح اول در عناصر تو در تو مورد استفاده قرار گیرد:
ul > li {
font-weight: bold;
}
این زمانی که شما دارای عناصر تودرتو مثل منویی با لیست نامرتب هستید، و می خواهید فقط سبک آیتم‌های لیست اول را تغییر دهید بسیار مفید است.
سلکتورهای ویژگی
سلکتورهای Attribute، یک راه به شدت قدرتمند برای هدف قرار دادن عناصر با ویژگی های خاص هستند و تقریبا چند راه برای مطابقت عناصر با سلکتور Attribute وجود دارد.
در مرحله اول، شما می‌توانید یک عنصر است که یک صفت خاص (حتی بی ارزش) دارد را با استفاده از این روش مطابقت دهید:
input[style] {
display: inline;
}
در مثال فوق تمام عناصر ورودی از هر نوع که دارای یک ویژگی سبک هستند، مطابقت پیدا می‌کنند.
شما همچنین می‌توانید عناصری را که دارای یک ویژگی با مقدار دقیق هستند را با استفاده از ترکیب CSS زیر تطبیق دهید:
input[type="password"] {
background: yellow;
}
انواع دیگری از این نوع سلکتور نیز وجود دارد که در حوصله این بحث نمی‌گنجد.
همانطور که می‌بینید طیف گسترده‌ای از سلکتورهای CSS برای انتخاب وجود دارند و به نظر می رسد در CSS4 سلکتورهای بیشتری معرفی شده است.
