انتخابگر های CSS

نویسنده: محمدرضا نامور... بازیدها: 643 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

سلام به همراهان کلاس برتر ؛ با یک مطلب کاربردی دیگر در زمینه CSS همراه شما هستیم .

انتخابگر های CSS

در CSS انتخابگرها الگوهایی هستند که برای انتخاب عنصر (عناصر) موردنظر برای استایل دادن استفاده می شوند.

برای بهتر متجه شدن نحوه عملکرد انتخابگرهای مختلف میتوانید از "CSS Selector" استفاده کنید.

انتخابگر	مثال	توضیح مثال
.class	.intro	همه عناصر دارای کلاس = "intro" را انتخاب می کند
.class1.class2	.name1.name2	همه عناصر دارای مجموعه name1 و name2 را در ویژگی کلاس خود انتخاب می کند
.class1 .class2	.name1 .name2	همه عناصر دارای name2 را که از فرزندان عنصری با name1 است انتخاب می کند
#id	#firstname	عنصر را با id = "firstname" انتخاب می کند
*	*	همه عناصر را انتخاب می کند
element	p	همه عناصر <p> را انتخاب می کند
element.class	p.intro	همه عناصر <p> با کلاس = "intro" را انتخاب می کند
element,element	div, p	همه عناصر <div> و همه عناصر <p> را انتخاب می کند
element element	div p	همه عناصر <p> درون عناصر <div> را انتخاب می کند
element>element	div > p	همه عناصر <p> را انتخاب می کند در جایی که والدین یک عنصر <div> هستند
element+element	div + p	همه عناصر <p> را که بلافاصله بعد از عناصر <div> قرار می گیرند انتخاب می کند
element1~element2	p ~ ul	هر عنصر <ul> را که قبل از آن عنصر <p> قرار دارد انتخاب می کند
[attribute]	[target]	همه عناصر دارای ویژگی هدف را انتخاب می کند
[attribute=value]	[target=_blank]	همه عناصر دارای هدف = "_ خالی" را انتخاب می کند
[attribute~=value]	[title~=flower]	همه عناصر دارای مشخصه عنوان حاوی کلمه "گل" را انتخاب می کند
[attribute\|=value]	[lang\|=en]	همه عناصر دارای مقدار صفت lang را با شروع "en" انتخاب می کند
[attribute^=value]	a[href^="https"]	هر عنصر <a> که مقدار ویژگی href با "https" شروع می شود را انتخاب می کند
[attribute$=value]	a[href$=".pdf"]	هر عنصر <a> که مقدار ویژگی href با ".pdf" پایان می یابد را انتخاب می کند
[attribute*=value]	a[href*="w3schools"]	هر عنصر <a> که مقدار ویژگی href شامل زیر رشته "w3schools" است را انتخاب می کند
:active	a:active	پیوند فعال را انتخاب می کند
::after	p::after	بعد از محتوای هر عنصر <p> چیزی وارد کنید
::before	p::before	قبل از محتوای هر عنصر <p> چیزی وارد کنید
:checked	input:checked	هر عنصر <ورودی> را انتخاب می کند
:default	input:default	عنصر پیش فرض <input> را انتخاب می کند
:disabled	input:disabled	هر عنصر <input> غیرفعال شده را انتخاب می کند
:empty	p:empty	هر عنصر <p> را که فرزندی ندارد انتخاب می کند (از جمله گره های متنی)
:enabled	input:enabled	هر عنصر <input> فعال شده را انتخاب می کند
:first-child	p:first-child	هر عنصر <p> را که اولین فرزند والدینش است انتخاب می کند
::first-letter	p::first-letter	اولین حرف از هر عنصر <p> را انتخاب می کند
::first-line	p::first-line	اولین خط از هر عنصر <p> را انتخاب می کند
:first-of-type	p:first-of-type	هر عنصر <p> را که اولین عنصر <p> والد آن است انتخاب می کند
:focus	input:focus	عنصر ورودی را که دارای کانون است انتخاب می کند
:hover	a:hover	پیوندها را روی ماوس انتخاب می کند
:in-range	input:in-range	عناصر ورودی را با مقدار در یک محدوده مشخص شده انتخاب می کند
:indeterminate	input:indeterminate	عناصر ورودی را که در یک حالت نامشخص هستند انتخاب می کند
:invalid	input:invalid	همه عناصر ورودی را با مقدار نامعتبر انتخاب می کند
:lang(language)	p:lang(it)	هر عنصر <p> را با ویژگی زبان برابر با "it" (ایتالیایی) انتخاب می کند
:last-child	p:last-child	هر عنصر <p> که آخرین فرزند والدینش است را انتخاب می کند
:last-of-type	p:last-of-type	هر عنصر <p> که آخرین عنصر <p> والد آن است را انتخاب می کند
:link	a:link	همه پیوندهای بازدید نشده را انتخاب می کند
:not(selector)	:not(p)	هر عنصری را که عنصر <p> نیست انتخاب می کند
:nth-child(n)	p:nth-child(2)	هر عنصر <p> را که فرزند دوم والدینش است انتخاب می کند
:nth-last-child(n)	p:nth-last-child(2)	هر عنصر <p> را که فرزند دوم والدینش است ، با احتساب از فرزند آخر انتخاب می کند
:nth-last-of-type(n)	p:nth-last-of-type(2)	هر عنصر <p> را که از آخرین فرزند شمارش می شود ، دومین عنصر <p> والدین خود انتخاب می کند
:nth-of-type(n)	p:nth-of-type(2)	هر عنصر <p> را انتخاب می کند که دومین عنصر <p> والد آن باشد
:only-of-type	p:only-of-type	هر عنصر <p> که تنها عنصر <p> والد آن است را انتخاب می کند
:only-child	p:only-child	هر عنصر <p> را انتخاب می کند که تنها فرزند والدین آن است
:optional	input:optional	عناصر ورودی را بدون ویژگی "مورد نیاز" انتخاب می کند
:out-of-range	input:out-of-range	عناصر ورودی را با مقداری خارج از محدوده مشخص شده انتخاب می کند
::placeholder	input::placeholder	عناصر ورودی را با مشخصه "مکان نگهدار" مشخص شده انتخاب می کند
:read-only	input:read-only	عناصر ورودی را با مشخصه "فقط خواندنی" مشخص شده انتخاب می کند
:read-write	input:read-write	عناصر ورودی را با ویژگی "فقط خواندنی" مشخص نشده انتخاب می کند
:required	input:required	عناصر ورودی را با مشخصه "مورد نیاز" مشخص می کند
:root	:root	عنصر اصلی سند را انتخاب می کند
::selection	::selection	بخشی از عنصری را که توسط کاربر انتخاب شده است انتخاب می کند
:target	#news:target	عنصر فعلی # خبر را انتخاب می کند (روی URL حاوی آن نام لنگر کلیک کنید)
:valid	input:valid	همه عناصر ورودی را با مقدار معتبر انتخاب می کند
:visited	a:visited	همه پیوندهای بازدید شده را انتخاب می کند

امیدوارم با انتشار این مطلب تونسته باشیم به شما کمک کنیم ؛ موفق باشید.

نویسنده: محمدرضا نامور... بازیدها: 643 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

نوشتن نظر:

برای ارسال نظر باید وارد حساب کاربری خود شوید.

جستجو

دسته بندی ها

کلاس برتر

ارائه دهنده بهترین و به روز ترین ویدیو های و مقالات آموزشی و همچنین مقالات مختلف در رابطه با تکنولوژی ،معماری ،مدیریت و سایر رشته های کاربردی.ما برای شما بهترین ها را میخواهیم.

درحال بارگذاری

انتخابگر های CSS

نوشتن نظر:

جستجو

دسته بندی ها

کلاس برتر

سایر خدمات مجموعهخدمات زیر تحت مدیریت برد تخصصی ارائه می شود.

طراحی وب سایت

راه اندازی و پشتیبانی شبکه

هوشمند سازی منازل

افزایش کارایی نیرو انسانی

تعمیرات دستگاه های الکترونیکی

طراحی داخلی

تبلیغات فضای مجازی

برنامه نویسی

هم اکنون در سایت ثبت نام کنید تا بتوانید از امکانات سایت استفاده کنید

لینک های سریع

تماس امن