انتخابگرها در سی اس اس Selectors in CSS

انتخابگرها در سی اس اسیکی از مسائل مهم هنگام طراحی یک وب سایت، نوشتن کدهای سی اس اس هستند. برای اینکه ما بتوانیم به راحتی طرح مورد نظرمان را پیاده سازی کنیم، باید به کدهای سی اس اس مسلط باشیم و بیشترین تسلط را باید در زمینه انتخابگرها در سی اس اس داشته باشیم. در این پست قصد دارم شما را با انواع انتخابگرها در سی اس اس آشنا کنم.

برای مشاهده متن کامل انتخابگرها در سی اس اس به ادامه مطلب رجوع کنید.

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

قبل از صحبت درباره اهمیت انتخابگرها در سی اس اس، باید درباره اینکه اصلاً انتخابگرها چی هستند و به چه دردی میخورند، صحبت کنیم.

انتخابگرها در سی اس اس یعنی چه؟

ما هنگام طراحی صفحات وب با استفاده از زبان HTML عناصر و المان های مورد نظرمان را برای صفحات سایت ایجاد میکنیم. اما با استفاده از HTML نمیتوانیم به آنها گرافیک خاصی بدهیم و آنها را به شکل ها و شمایل مورد نظرمان درآوریم. پس برای این کار به سرغ زبان CSS میرویم. اما نکته اینجاست که در سی اس اس ما باید مشخص کنیم که استایل ها و گرافیک هایی را که طراحی کرده­ایم برای کدامیک از عناصر موجود در صفحه ما هستند. پس باید یک عنصر (یا چند عنصر) را اول انتخاب کنیم و بعد به آنها استایل و گرافیک را نسبت بدهیم.

اهمیت انتخابگرها در سی اس اس

با توجه به توضیح بالا، میبینیم انتخابگرها در سی اس اس از اهمیت بالایی برخوردار هستند به طوری که برای اینکه ما بتوانیم طرح دلخواه خود را پیاده کنیم و این امر نیز مستلزم انتخاب درست عناصر توسط انتخابگرها در سی اس اس است.

معرفی انتخابگرها در سی اس اس

حال میخواهیم به لیست انتخابگرها در سی اس اس اشاره کنیم و تمام انتخابگرها در سی اس اس را در یک جدول به شما معرفی کنیم. در پست های آتی انشاا… به بیان مثال، توضیح و روش استفاده از انتخابگرها در سی اس اس خواهیم پرداخت.

انتخابگر

نمونه

توضیح

CSSنسخه

.class

.intro

انتخاب تمام عناصری که دارای کلاس intro هستند

1

#id

#firstname

انتخاب عنصری که شناسه ID آن firstname است

1

*

*

انتخاب تمام عناصر موجود

2

element

p

انتخاب تمام عناصر p (تمام تگ های p)

1

element,element

div,p

انتخاب تمام عناصر Div و همچنین تمام عناصر p

1

element element

div p

انتخاب تمام عناصر p که داخل عنصر Div هستند

1

element>element

div>p

انتخاب تمام عناصر p به شرطی که عنصر والد آن Div باشد

2

element+element

div+p

انتخاب تمام عناصر p که بلافاصله بعد از عنصر Div قرار دارند

2

[attribute]

[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

انتخاب عنصر input هنگامی که مکان نما روی آن قرار گرفته (درحالت انتخاب است)

2

:first-letter

p:first-letter

انتخاب اولین کارکتر تمام عناصر p

1

:first-line

p:first-line

انتخاب اولین خط تمام عناصر p

1

:first-child

p:first-child

انتخاب اولین عنصر p میان تمام عناصر 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 که مشخصه src آن ها با مقدار https شروع میشود

3

[attribute$=value]

a[src$=".pdf"]

انتخاب تمام عناصر a که مشخصه src آنها به .pdf ختم میشود

3

[attribute*=value]

a[src*="pasys"]

انتخاب تمام عناصر a که مشخصه src آن ها شامل زیر رشته pasys باشد

3

:first-of-type

p:first-of-type

انتخاب  تمام عناصر p که والد آن ها اولین عنصر 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 که فقط زیر مجموعه تگ دیگری هستند (child یا به عبارتی خودشان تگ والد نیستند)

3

:nth-child(n)

p:nth-child(2)

انتخاب  تمام عناصر p که دومین فرزند (Child) والد خود هستند

3

:nth-last-child(n)

p:nth-last-child(2)

انتخاب  تمام عناصر p که دومین فرزند (Child) والد خود هستند، انتخاب از آخرین فرزند شروع میشود

3

:nth-of-type(n)

p:nth-of-type(2)

انتخاب عنصر p که دومین عنصر p والد خود باشد.

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

انتخاب عنصر p که دومین عنصر p والد خود باشد، انتخاب از آخرین فرزند شروع میشود

3

:last-child

p:last-child

انتخاب  تمام عناصر p که آخرین فرزند (Child) والد خود هستند

3

:root

:root

انتخاب عنصر سرشاخه سند موردنظر

3

:empty

p:empty

انتخاب تمام عناصر p در داخل آن ها هیچ فرزندی موجود نیست و فقط دارای متن هستند

3

:target

#news:target

انتخا لینکی که هدف آن #news است (درهنگام کلیک روی لینک استایل اعمال میشود)

3

:enabled

input:enabled

انتخاب  تمام عناصر input که فعال هستند

3

:disabled

input:disabled

انتخاب  تمام عناصر input که غیرفعال هستند

3

:checked

input:checked

انتخاب  تمام عناصر input که علامت زده شده اند

3

:not(selector)

:not(p)

انتخاب تمام عناصر بجز عنصر p

3

::selection

::selection

انتخاب عناصری که کاربر آن ها را انتخاب کرده باشد (هایلایت کردن با مأوس توسط کاربر)

برای کسب اطلاعات بیشتر درباره انتخابگرها در سی اس اس میتوانید به W3schools و W3c مراجعه نمایید.