انتخابگرها در cssReviewed by Datacss.ir on Nov 5Rating:

انتخابگرها در 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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست
Call Now Buttonتماس سریع