سلام خدمت تمام دوستان عزیز

خواستم در این قسمت تفاوت ریز و جزئی بین چند سلکتور معرفی شده در ویدیو توسط استاد را بگم چون گاها باهم دیگه اشتباه گرفته میشن و شاید تفاوت بینشون برای بعضی از دوستان قابل لمس نباشه

[attribute~=value]

این سلکتور فقط المان هایی رو انتخاب میکنه که شامل کلمه مقدار تعریف شده value باشن حالا قبل و بعدش اگر مقادیر دیگه بود مشکلی نیست

<style>
[title~=flower] {
  border: 5px solid yellow;
}
style>
<img src="klematis.jpg" title="klematis flower">
<img src="img_flwr.gif" title="flowers">
<img src="landscape.jpg" title="flower-a">
<img src="klematis.jpg" title="flower klematis">

طبق کد بالا فقط تصویر اول و آخر border میگیرد زیرا فقط تصویریک دارای اتربیوت تایتل با مقدار flower هست مابقی کلمات اضافه‌تری دارند و قابل قبول نیستند.

اول یا آخر بودن کلمه flower تفاوتی ندارد.

[attribute^=value]

این سلکتور فقط المان هایی رو انتخاب میکنه که با مقدار value مورد نظر شروع بشن و بعدش هرچیزی هم باشه مهم نیست.

<style>
div[class^="test"] {
  background: #ffff00;
}
style>

<div class="first_test">The first div element.div>
<div class="test abc">The third div element.div>
<div class="test_ex">The fourth div element.div>

از 3 دیو بالا فقط دو دیو آخر بک گراند میگیرند زیرا شروع آنها با کلاس test هست.

[attribute$=value]

این سلکتور فقط المان هایی رو انتخاب میکنه که با مقدار value مورد نظر تمام بشن و قبلش هرچیزی هم باشه مهم نیست.( این سلکتور در واقع مخالف سلکتور قبلی میباشد )

<style> 
div[class$="test"] {
  background: #ffff00;
}
style>
<div class="singletest">The first div element.div>
<div class="testa">The second div element.div>
<div class="abc test">The third div element.div>

در مثال بالا دیو اول و آخر بک گراند میگیرند زیرا با مقدار test خاتمه یافتند.

[attribute*=value]

این سلکتور المان هایی رو انتخاب میکنه که با شامل value مورد نظرباشن، قبل و بعد هرچیزی بود مهم نیست( این سلکتور در واقع ترکیب دو سلکتور قبلی میباشد )

<style> 
div[class$="test"] {
  background: #ffff00;
}
style>
<div class="atest">The first div element.div>
<div class="testa">The second div element.div>
<div class="atesta">The third div element.div>

هر 3 دیو بالا مقدار بکگراند را دریافت میکنند.

[attribute|=value]

این سلکتور فقط المان هایی رو انتخاب میکنه که مقدار value آن دقیقا یکی باشد یا اینکه با آن value شروع و بعد از آن با خط - جدا شده باشند. ( مثل سلکتور ^ که شروع باشد با مقدار مربوطه بود و بعدش هرچی میتوانست باشد اما این سلکتور کنترل بیشتری میکند و حتما باید یا عینا با همان مقدار باشد و یا شروع با همان مقدار و با خط - جدا شود)

<style>
[lang|=en] {
  background: yellow;
}
style>
<p lang="en">Hello!p>
<p lang="en-us">Hi!p>
<p lang="us-en">Hi!p>
<p lang="enus">Hei!p>

فقط دو دیو اول شامل شرایط توضیح داده شده میباشند و بکگراند میگیرند و دو دیو آخر انتخاب نخواهند شد.