انتخابگرها در css
در این بخش از آموزش 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 لینک http://sitedesign-co.ir را اضافه می کند.
after : بعد تگ های p لینک http://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 مورد نظر را به آنها اعمال میکند.
منبع: sitedesign-co.com
سایر مقالات مرتبط :
- روش های تشخیص اصل بودن تلویزیون های سامسونگ
- چگونه تایمر کولر گازی را خاموش کنیم؟
- بررسی صرافی انلاین بدون نیاز به احراز هویت
- نکاتی برای خرید ایمیل شرکتی و ایرانی
- بهترین برندهای تلویزیون هوشمند کدامند؟
- اهمیت سیگنال رایگان ارز دیجیتال فیوچرز در ترید
- آشنایی با بهترین قالب های چند منظوره در وردپرس
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن