cssblog.ir logo
S

attribute

انتخاب عناصر از طریق خصلت های آنان در HTML

در CSS می‌توان عناصر را با استفاده از خصلت‌های آنان (Attribute) به شکل‌های مختلفی انتخاب نمود.

سلکتور خصلت‌ها (attribute)

یکی از کاربردی‌ترین سلکتورهای css سلکتور خصلت می باشد. ما به شکل های مختلفی می‌توانیم خصلت‌ها را انتخاب کنیم. مثلا ما می‌توانیم تمام input هایی که دارای نوع checkbox هستند را انتخاب کنیم.

input[type="checkbox"] {
	
}

همانطور که در مثال فوق مشاهده می کنید ما برای انتخاب خصلت ها از براکت [] استفاده می کنیم.

همچنین ما می توانیم برای مقداری را برای آن خصلت درنظر نگیریم و همه عناصر دارای آن خصلت را انتخاب کنیم. مثلا همه عناصری که دارای alt هستند.

[alt]{
	
}

صد البته که ما می توانیم این سلکتور را با مابقی سلکتور ها ترکیب کنیم:

img[alt] {
	
}

div [alt]

[alt] + p {
	
}

مثال:‌ همه عناصر دارای alt که داخل تگ article هستند

article [alt] {
	
}

مثال:‌ پاراگراف هایی که پس از عناصر دارای alt قرار گرفته اند

[alt] + p {
	
}

سایر علائم قابل استفاده در سلکتور خصلت

علامت =*

مقدار می تواند در هرکجا از آن خصلت باشد

<img alt="red ferrari f50">

سلکتور زیر، عنصر فوق را انتخاب خواهد کرد:

img[alt*=ferrari] {
	
}

علامت =~

مقدار باید در یک لیست جداشده با فاصله (space separated) در آن خصلت باشد. شباهت زیادی به * دارد اما با این تفاوت که بصورت واژه مقادیر را در نظر می‌گیرد و اگر در یک قسمتی از یک واژه باشد، آن را انتخاب نمی‌کند.

<div data-travel="car,bus,airplane,train"></div>
div[data-travel~="airplane"] {
	
}

علامت =^

خصلت باید با این مقدار آغاز شود. مثال زیر تمام لینک‌هایی را انتخاب می‌کند که لینک آنها با متن https آغاز می شود

a[href^="https"] {

}

علامت =|

مقدار قرار گرفته در مقابل خصلت می‌بایست یا بصورت کامل در بعنوان مقدار خصلت استفاده شده باشد یا پس از آن کارکتر دش (-) قرار گرفته باشد. 

[data-lang|="fa"] {

}

سلکتور فوق، عناصر زیر را انتخاب خواهد نمود:


<div data-lang="fa"></div>
<div data-lang="fa-ir"></div>

و عنصر زیر را انتخاب نخواهد کرد:

<div data-lang="farsi-ir"></div>

علامت =$

خصلت باید با این مقدار تمام شود. برای مثال تمام لینک های منتهی به فایل‌های mp3 را می‌توان از این طریق انتخاب نمود:

a[href$=".mp3"]{
	
}

آیا می توان در جاوا اسکریپت از این سلکتورها استفاده کرد؟

بله! پاسخ این سوال مثبت است. شما می توانید مانند مابقی سلکتورها در کتابخانه‌ای مانند جی‌کوئری از این سلکتورها استفاده کنید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند