تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده تخفیف ویژه (تمدید شد)
سبد (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 آن با واژه "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

دیدگاه‌ها  

+3 # moonlightsky 1395-03-17 01:44
سلام خسته نباشید ممنون از سایت خیلی خوبتون
ما بصورت کلی می تونیم بجای علامت : از علامت :: استفاده بکنیم، البته پیشنهادی که می شه بیشتر : است.
::after
::before
::first-letter
::first-line

باز هم ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # surreal mind 1394-09-08 17:17
سلام
خسته نباشید
مرسی بابت ترجمه های خوبتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohsenm 1394-08-26 01:17
با سلام خصوصیت input["type=tex t"] جزو اینا نمیشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-26 07:02
با سلام.
به اطلاع می‌رساند انجمن سایت بیاموز به آدرس http://beyamooz.com/forum/ راه‌اندازی شد. با درج سؤال در انجمن، می‌توانید علاوه بر پاسخ سریع از نظر دیگر کاربران هم بهره‌مند شوید.

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