در این بخش از آموزش css ، انتخابگرها را برای شما نام می بریم.
از جمله مواردی که سی اس اس در اختیار شما می گذارد تعیین انتخابگرهایی به نام class و id می باشد.در اینجا انواع انتخابگرها را برای شما توضیح می دهیم.
class : عناصری که به آنها این دستور وارد شده را به style مورد نظر تبدیل میکند.
#id : عناصری که دستور id=name را دارند را به style موزد نظر تبدیل می کند.
* : همه ی عناصر را انتخاب می کند و دستورات مورد نظر را اعمال میکند.
element : تگ های <p> را انتخاب میکند و دستورات مورد نظر را در طراحی سایت به آنها اعمال می کند.
elementءelement : تگ های p , h1 را انتخاب میکند و style موردنظر را در آنها اعمال می کند.
element element : همه ی تگهای p که داخل تگ div قرار گرفته اند را انتخاب می کند و دستور مورد نظر را در آنها اعمال می کند.
element>element : تگ ها p که داخل تگ div می باشند و داخل این تگ ها به وجود آمده اند را انتخاب می کند و style موردنظر را به اعمال می کند.
element+element : تگ های p که بلافاصله پپس از تگ div قرار گرفته اند را انتخاب می کند و دستورات مورد نظر را به انها اعمال می کند.
attribute : تگ های a که ویژگی target را داشته باشند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.
attribute=value: این ویژگی در طراحی سایت تگ های a که ویژگی target=_blank را داشته باشند را انتخاب می کند و style مورد نظر را به آن اعمال می کند.
attribute~=value : تگ های a که ویژگی title=pars را دارند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.
attribute|=value : این انتخابگر عناصری که ویژگی lang آنها با fa شروع میشود را انتخاب کرده و style موردنظر را بر روی آن اعمال می کند.
link : این انتخابگر تگ های a ای را که روی آنها کلیک نشده است را انتخا کرده و style موردنظر را به آن اعمال می کند.
visited : گ های a ای که روی آن کلیک شده باشد را انتخاب کرده و style موزدنظر را بر روی آن اعمال میکند.
hover:این ویژگی در طراحی سایت تگ های a ای که با ماوس روی آن ها میروید را انتخاب می کند و دستورات موردنظر را به آن اعمال می کند.
focus:همه ی تگ های input را انتخاب کرده و دستور موردنظر را اجرا می کند.
first-letter : این انتخابگر اولین حرف تگ p را انتخاب کرده و دستور مورد نظر را به آن اعمال می کند.مواردی که می تواند در first-letter مورداستفاده قرار داد عبارتند از:
√ font properties
√ color properties
√ background properties
√ margin properties
√ padding properties
√ border properties
√ text-decoration
√ vertical-align (only if float is 'none')
√ text-transform
√ line-height
√ float
√ clear
first-line : این انتخابگر اولین خط از تگ p را انتخاب می کند و style مورد نظر را به آن اعمال می کند.first-line شامل ویژگی هایی می باشد که عبارتند از :
√ font properties
√ color properties
√ background properties
√ word-spacing
√ letter-spacing
√ vertical-align
√ text-decoration
√ text-transform
√ line-height
√ clear
first-child : این انتخابگر تمام تگ های p را انتخاب می کند و دستور مورد نظر را به آن اعمال می کند.
before : به اول تمامی تگ های p لینک https://sitedesign-co.ir را اضافه می کند.
after : بعد تگ های p لینک https://sitedesign-co.ir را اضافه می کند.
lang : این انتخابگر تمام تگ های p که با ویژگی lang=it شروع می شوند ر انتخاب کرده و دستورات مورد نظر را به آنها اعمال می کند.
element1~element2 : تمام تگ های ul که والد مشترکی با تگ p دارند را انتخاب می کند و دستورات را در آن ها اعمال می کند.
attribute^=value : تمام تگ های div که با ویژگی class="test" شروع میشوند را انتخاب کرده و style موردنظر را به آنها اعمال می کند.
attribute$=value : تمام تگ ها ی div که با ویژگی class="test" هستند را انتخاب می کند و style مورد نظر را به آنها اعمال می کند.
attribute*=value : این انتخابگر تگ های div که ویژگی class="test" را شامل می شود را انتخاب کرده و style موردنظر را به آن اعمال می کند.
first-of-type : این خصوصیت در طراحی سایت ، اولین تگ p را انتخاب کرده و سپس دستور مورد نظر را در آن اعمال می کند.
last-of-type : این انتخابگر آخرین تگ p را انتخاب کرده و دستورات مدنظر را در آن اعمال می کند.
only-of-type : این انتخابگر تگ p را که only child والد خود باشد را انتخاب می کند و style موردنظر را به آن اعمال می کند.
()nth-child : تگ های p که دومین فرزند والد خود باشد را انتخاب کرده و دستور موردنظر را به آن اعمال می کند.
()nth-last-child : هر تگ <p> که دومین فرزند (only child) والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-of-type : هر تگ <p> که دومین تگ <p> از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-last-of-type : هر تگ <p> که دومین تگ <p> از والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
last-child : برای هر تگ <p> که آخرین فرزند (child) از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
root : این عنصر در طراحی سایت تمامی تگ های html را انتخاب می کند و style مورد نظر را به آن اعمال می کند.
empty : هر تگ <p> که محتوایی نداشته باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
enabled : تمام تگ های <input> که "type="text باشند و فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
disabled : تمام تگ های <input> که "type="text باشند وغیر فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
checked : تمام تگ های <input> که "type="checked باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
not : تمامی تگ ها جز تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
selection : متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند.
اگر به تازگی با 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 سلکتورهای بیشتری معرفی شده است.