X

آموزش Css و برنامه نوسی وب

انجمن برنامه نویسی آموزش CSS

12 آبان 2016

انتخابگرها در Css

انتخابگرها در Css

نویسنده: نرم افزار حسابداری حسیب نت  /  دسته ها: آموزش 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 لینک 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 موردنظر را به آنها اعمال می‌کند.

Print

تعداد نمایش ها (3550)      نظرات (0)

نظرات بسته شده است.

x
دی ان ان