سبد (0)

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

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

تمام selectorهای عنوان شده در این سایت، با استفاده از تمام مرورگرهای اصلی تست گردیده است.

در 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 آن با واژه "pdf." خاتمه می یابد.

 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
نوشته شده توسط امیر پهلوان صادق
بازدید: 25910

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه