در این بخش از آموزش css، انتخابگرها را برای شما نام میبریم.
از جمله مواردی که سی اس اس در اختیار شما میگذارد تعیین انتخابگرهایی به نام class و id میباشد. در اینجا انواع انتخابگرها را برای شما توضیح میدهیم.
class: عناصری که به آنها این دستور وارد شده را به style موردنظر تبدیل میکند.
#id: عناصری که دستور id=name را دارند را به style موردنظر تبدیل میکند.
* : همه ی عناصر را انتخاب میکند و دستورات موردنظر را اعمال میکند.
element: تگهای <p> را انتخاب میکند و دستورات موردنظر را در طراحی سایت به آنها اعمال میکند.
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 لینک http://hpk.ir را اضافه میکند.
after: بعد تگهای p لینک http://hpk.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 موردنظر را به آنها اعمال میکند.
disable: تمام تگهای <input> که "type="text باشند و غیر فعال باشند را انتخاب و style موردنظر را به آنها اعمال میکند.
checked: تمام تگهای <input> که "type="checked باشند را انتخاب و style مورد نظر را به آنها اعمال میکند
not: تمامی تگها جز تگ <p> را انتخاب و style موردنظر را به آنها اعمال میکند.
selection: متنهایی که با دوبار کلیک کردن بر آنها انتخاب میشوند، style موردنظر را به آنها اعمال میکند.