شبه کلاسها (Pseudo-Class) در Css
اردیبهشت ۱۹, ۱۴۰۳
مقدمه ای بر سلکتورهای Css
اردیبهشت ۱۹, ۱۴۰۳
در این بخش از آموزش 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 لینک https://hpk.ir را اضافه میکند.
after: بعد تگهای p لینک https://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 موردنظر را به آنها اعمال میکند.
