مرجع CSS-لیست تمام گزینشگرها

CSS Selector - مرجع کامل گزینشگرها در CSS

در CSS، به الگوهایی که برای انتخاب عناصری که قصد دارید به آن ها استایل بدهید، Selector یا گزینشگر می گوییم.

ستون "CSS" در جدول زیر نسخه CSS ای که این الگو در آن تعریف شده است را نشان می دهد. (CSS1، CSS2، CSS3)

گزینشگر	مثال	توضیحات مثال	CSS
.class	.intro	تمام عناصر با کلاس "intro" را انتخاب می کند.	1
#id	#firstname	عنصری که id آن "firstname" می باشد را انتخاب می کند.	1
*	*	تمام عناصر را انتخاب می کند.	2
element	p	تمام عناصر <p> را انتخاب می کند.	1
element,element	div,p	تمام عناصر <P> و تمام عناصر <div> را انتخاب می کند.	1
element element	div p	تمام عناصر <p> که داخل عناصر <div> قرار دارند را انتخاب می کند.	1
element>element	div>p	تمام عناصر <p> که پدر آن ها عنصر <div> است را انتخاب می کند.	2
element+element	div+p	تمام عناصری که بلافاصله بعد از عناصر <div> قرار گرفته اند.	2
[attribute]	[target]	تمام عناصری که دارای خصوصیت target هستند را انتخاب می کند.	2
[attribute=value]	[target=_blank]	تمام عناصری که خصوصیت target آن برابر "blank_" می باشد را انتخاب می کند.	2
[attribute~=value]	[title~=flower]	تمام عناصری که خصوصیت title آن شامل واژه "flower" باشد را انتخاب می کند.	2
[attribute\|=value]	[lang\|=en]	تمام عناصری که خصوصیت lang آن با مقدار "en" آغاز می شود.	2
:link	a:link	تمام لینک هایی که از آن بازدید نشده است را انتخاب می کند.	1
:visited	a:visited	تمام لینک هایی که بازدید شده است را انتخاب می کند.	1
:active	a:active	لینک های فعال را انتخاب می کند.	1
:hover	a:hover	لینک هایی را که موس روی آن حرکت می کند را انتخاب می کند.	1
:focus	input:focus	تمام عناصر ورودی که فوکوس شده اند را انتخاب می کند.	2
:first-letter	p:first-letter	اولین حرف عنصر <p> را انتخاب می کند.	1
:first-line	p:first-line	اولین خط هر عنصر <p> را انتخاب می کند.	1
:first-child	p:first-child	تمام عناصر <p> که اولین فرزند پدرشان هستند (فرزند ارشد پدرشان) را انتخاب می کند.	2
:before	p:before	محتوا را قبل از محتوای تمام عناصر <p> درج می کند.	2
:after	p:after	محتوا را بعد از هر عنصر <p> درج می کند.	2
:lang(language)	p:lang(it)	تمام عناصر <p> را انتخاب می کند که خصوصیت lang آن با "it" (ایتالیایی) تنظیم شده است.	2
element1~element2	p~ul	تمام عناصری <ul> که قبل از یک عنصر <p> قرار دارد را بر می گرداند.	3
[attribute^=value]	a[src^="https"]	تمام عناصر <a> را انتخاب می کند که که خصوصیت scr آن با واژه "https" آغاز شود.	3
[attribute$=value]	a[src$=".pdf"]	تمام عناصر <a> را انتخاب می کند که که خصوصیت scr آن با واژه "https" خاتمه می یابد.	3
[attribute=value*]	a[src*="Beyamooz"]	تمام عناصر <a> که خصوصیت src آن حاوی رشته "Beyamooz" ّباشد را انتخاب می کند.	3
:first-of-type	p:first-of-type	تمام عناصر <p> را که اولین عنصر <p> پدرشان باشند را انتخاب می کند. توجه فرمایید که p:first-child باید p اولین فرزند پدرش باشد.	3
:last-of-type	p:last-of-type	تمام عناصر <p> که آخرین عنصر <p> پدرشان هستند را انتخاب می کند.	3
:only-of-type	p:only-of-type	تمام عناصر <p> که تنها عنصر <p> پدرشان هستند را انتخاب می کند.	3
:only-child	p:only-child	تمام عناصر <p> که تنها فرزند پدرشان هستند را انتخاب می کند. (تک فرزند.)	3
:nth-child(n)	p:nth-child(2)	تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.	3
:nth-last-child(n)	p:nth-last-child(2)	تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.	3
:nth-of-type(n)	p:nth-of-type(2)	تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.	3
:last-child	p:last-child	تمام عناصر <p> که آخرین فرزند پدرشان هستند را انتخاب می کند.	3
:root	:root	عنصر root سند را بر می گرداند.	3
:empty	p:empty	تمام عناصر <p> که فرزند ندارند، را انتخاب می کند.	3
:target	#news:target	تمام عناصر news# فعال جاری را بر می گرداند.	3
:enabled	input:enabled	تمام عناصر <input> را انتخاب می کند که enabled هستند.	3
:disabled	input:disabled	تمام عناصر <input> که disabled هستند را انتخاب می کند.	3
:checked	input:checked	تمام عناصر <input> که checked هستند را انتخاب می کند.	3
:not(selector)	:not(p)	تمام عناصر را به جز عناصر <p> انتخاب می کند.	3
::selection	::selection	قسمتی از عنصر که توسط کاربر به حالت انتخاب درآمده است را انتخاب می کند.	3

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

تشکرات از این پست

moradi92