آموزش سلکتور Attribute در CSS

 ما کلمه ی Attribute در CSS را به عبارتِ خصوصیت ترجمه می کنیم، به مثال زیر توجه کنید، به هریک از سه کلمه ی قرمز رنگ در تصویر زیر، Attribute یا خصوصیت گفته می شود:

وقتی صحبت از هردوی کلاس(class) و آی دی(ID) به میان می آید، در حقیقت آنچه این دو انجام می دهند، انتخاب یک مقدار از خصوصیت ها هست. سینتکس به کار رفته در دو مقاله ی قبلی، مخصوص سندهای HTML و XHTML و SVG و MathML بوده است. اما ممکن است در دیگر زبان ها، از کلاس ها و آی دی ها استفاده نشود(زیرا ممکن است این خصوصیت ها در این زبان وجود نداشته باشند). برای حل این مشکل، CSS2 از سلکتورهای خصوصیت(attributes) رونمایی کرد؛ که می توان از آن برای انتخاب عناصر بر اساس خصوصیت ها و مقادیر آنها استفاده کرد.

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

1. سلکتور خصوصیت ساده
2. سلکتور مقدار دقیق خصوصیت
3. سلکتور مقدار جزئی خصوصیت
4. سلکتور خصوصیت منتهی به مقدار(leading-value attribute selectors)

 استفاده از سلکتور خصوصیت ساده در CSS

اگر بخواهیم عناصری را انتخاب کنیم که حاوی یک خصوصیت خاص هستند، صرف نظر از اینکه مقدار آن چه باشد، می توانیم از سلکتورهای خصوصیت ساده استفاده کنیم. بعنوان مثال، برای انتخاب تمام عناصر h1 که حاوی یک خصوصیت class هستند؛ که هر مقداری می تواند داشته باشد؛ می توانیم به صورت زیر عمل کنیم و رنگ متن آنها را نقره ای(silver) کنیم:

h1[class] {color: silver;}

بنابراین، فرض کنید کدهای زیر را داشته باشیم:

<h1 class="hoopla">Hello</h1>
<h1>Serenity</h1>
<h1 class="fancy">Fooling</h1>

نتیجه ی کدهای بالا در تصویر 2.9 نشان داده شده است.

 (تصویر 2.9: انتخاب عناصر بر اساس خصوصیت آنها)

این استراتژی در سندهای XML بسیار مفید است؛ زیرا زبان های XML تمایل دارند تا از عناصر و نام های خصوصیت(attribute names) که با اهداف آنها سازگار هست استفاده کنند.

یک زبان XML را در نظر بگیرید که از آن برای توضیح دادن سیاره های منظومه شمسی استفاده می شود؛ آن را PlanetML نام گذاری می کنیم. اگر بخواهیم تمام عناصر pml-planet که از خصوصیت moons (یعنی قمرها) استفاده می کنند را انتخاب کنیم و آنها را به صورت درشت و ضخیم(bold) نشان دهیم، و به این طریق، توجه خود را به هر سیاره ای که قمر دارد جلب کنیم، می توانیم به صورت زیر عمل کنیم:

pml-planet[moons] {font-weight: bold;}

 کد بالا، باعث می شود متنِ دومین و سومین عنصر در قطعه کدهای زیر به صورت ضخیم و درشت(Bold) نشان داده شود:

<pml-planet>Venus</pml-planet>
<pml-planet moons="1">Earth</pml-planet>
<pml-planet moons="2">Mars</pml-planet>

در سندهای HTML، ما می توانیم از این ویژگی به چند روش خلاقانه استفاده کنیم. بعنوان مثال می توانیم تمام تصاویری که از یک خصوصیت alt استفاده می کنند را استایل دهی کنیم؛ و به این طریق، تصاویری که به درستی تشکیل شده اند را برجسته کنیم:

img[alt] {border: 3px solid red;}

مثال خاص بالا، به طور کلی، بیشتر برای اهداف تشخیصی مفید است-- که مشخص می کند که آیا تصاویر به درستی کدنویسی شده اند یا نه.

اگر می خواهید هر عنصری که حاوی یک title است را به صورت ضخیم نشان دهید، می توانید به صورت زیر عمل کنید. title ها در اکثر مرورگرها، وقتی که نشانگر ماوس به روی آن عنصر می رود، نشان داده می شوند و با نام تول تیپ(tool tip) شناخته می شوند:

*[title] {font-weight: bold;}

به طور مشابه، ما می توانیم تنها عناصر a را، که حاوی یک خصوصیت href  هستند، استایل دهی کنیم؛ به این طریق می توانیم لینک های حقیقی را استایل دهی کنیم و لینک های مکان نما(placeholder anchors) را به حال خود رها کنیم. همچنین، این امکان نیز وجود دارد تا بر اساس وجود بیش از یک خصوصیت، عناصری را انتخاب کنیم. برای انجام این کار، می توانیم به صورت زنجیره ای، از سلکتورهای خصوصیت استفاده کنیم. بعنوان مثال، برای ضخیم کردن(bold) متن هر عنصر HTML لینک(hyperlink) که از هردوی خصوصیت های href و title استفاده می کند، می توانیم به صورت زیر عمل کنیم:

a[href][title] {font-weight: bold;}

دستور بالا باعث می شود اولین لینک در کدهای زیر به صورت bold نشان داده شود؛ اما هیچ کدام از عناصر خط شماره 2 و 3 انتخاب نخواهند شد:

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br />
<a href="http://www.webstandards.org">Standards Info</a><br />
<a title="Not a link">dead.letter</a>

گزینش بر اساس مقدار دقیق خصوصیت

ما می توانیم فرایند انتخاب(گزینش) را دقیق تر کنیم تا تنها عناصری انتخاب شوند که خصوصیت آنها برابر با مقدار خاصی باشد. بعنوان مثال، فرض کنید می خواهیم هر لینکی که به یک سند خاص در یک وب سرور اشاره می کند را به صورت bold(ضخیم) شده در بیاوریم. برای انجام این کار، می توانیم به صورت زیر عمل کنیم:

a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}

کد بالا باعث می شود که متن هر عنصری که یک خصوصیت href دارد و مقدار آن دقیقاً برابر با  http://www.css-discuss.org/about.html است به صورت ضخیم(bold) نشان داده شود. اگر در آدرس مذکور هر تغییری ایجاد کنیم، مثلا www را برداریم یا پروتکل را به https تغییر دهیم، دیگر هیچ تطابقی ایجاد نخواهد شد. برای هر عنصر، می توانیم ترکیبی از یک خصوصیت و یک مقدار را مشخص کنیم. اما اگر این ترکیب دقیقاً در سند ظاهر نشود، سلکتور مورد نظر با چیزی تطابق نخواهد کرد. 

دوباره، زبان های XML می توانند از این روش برای استایل دهی استفاده کنند. اجازه دهید دوباره به مثال PlanetML برگردیم. فرض کنید می خواهیم تنها، عناصر سیاره هایی را انتخاب(گزینش) کنیم که برای خصوصیت moons مقدار 1 دارند:

planet[moons="1"] {font-weight: bold;}

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

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

مانند گزینش خصوصیت، ما می توانیم برای انتخاب یک آدرس، به صورت زنجیره ای، از چند خصوصیت و مقدار استفاده کنیم. بعنوان مثال، می خواهیم سایزِ فونتِ متنِ هر عنصر لینک HTML که حاوی یک خصوصیت href با مقدار http://www.w3.org/ و یک خصوصیت title با مقدار W3C Home است را دو برابر کنیم. به صورت زیر عمل می کنیم:

a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;}

 این کار باعث می شود در کدهای زیر، سایز متن اولین لینک دو برابر شود، اما دومین یا سومین عنصر تغییر نمی کنند:

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br />
<a href="http://www.webstandards.org" title="Web Standards Organization">Standards Info</a><br />
<a href="http://www.example.org/" title="W3C Home">dead.link</a>

 نتیجه ی این کدها، در تصویر 2.10 نشان داده شده است.

 (تصویر 2.10: گزینش عناصر بر اساس خصوصیت و مقدار آن)

 دوباره، این شیوه از کدها نیاز دارد به اینکه یک تطابق دقیق برای مقدار خصوصیت ها وجود داشته باشد. وقتی که سلکتور با مقادیری روبه رو می شود که با فاصله ی سفید یک یکدیگر جدا شده اند(مثل خصوصیت class در HTML) تطابق با مشکل مواجه می شود. بعنوان مثال، به قطعه کد زیر توجه کنید:

<planet type="barren rocky">Mercury</planet>

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

planet[type="barren rocky"] {font-weight: bold;}

اگر ما از دستور planet[type="barren"] استفاده کنیم، چیزی را مورد تطابق قرار نمی دهد و با شکست مواجه می شود. این موضوع برای خصوصیت class در HTML نیز صادق است. به مثال زیر توجه کنید:

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

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

p[class="urgent warning"] {font-weight: bold;}

 این کار، با علامت گذاری کلاس با نقطه، که قبلاً توضیح داده شد، مشابه نیست؛ در بخش بعدی به توضیح آن خواهیم پرداخت. این کد، باعث می شود هر عنصر p که خصوصیت class آن دقیقاً برابر با مقدار "urgent warning" است، انتخاب شود؛ و این کلمات باید به همین ترتیب باشند و بین آنها یک فاصله سفید باید وجود داشته باشد. در واقع این کار، مورد تطابق دقیق قرار دادن یک رشته محسوب می شود.

همچنین توجه داشته باشید که سلکتورهای id و سلکتورهای خصوصیت، که خصوصیت id را هدف قرار می دهند، دقیقاً مشابه یکدیگر نیستند. به عبارت دیگر، بین کد h1#page-title  و h1[id="page-title"] یک تفاوت ظریف وجود دارد. این تقاوت در صفحه 97 در بخش Specificity توضیح داده شده است.

گزینش بر اساس مقادیر  جزئی خصوصیت

اکنون می خواهیم عناصری را بر اساس بخشی از مقادیر خصوصیت شان گزینش کنیم. در چنین موقعیت هایی، CSS گزینه های زیادی را برای تطابق قرار دادن زیر-رشته های یک مقدارِ خصوصیت در اختیار ما می گذارد. این گزینه ها در جدول 2.1 نشان داده شده اند.

(جدول 2.1: تطابق زیر-رشته ها با سلکتورهای خصوصیت)

 یک نوع گزینش خصوصیت خاص

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

*[lang|="en"] {color: white;}

این دستور، هر عنصری که خصوصیت lang آن برابر با en باشد یا با عبارت -en آغاز شود را مورد تطابق قرار می دهد. بنابراین، سه عنصر ابتدایی در مثال زیر، انتخاب می شوند اما دو مورد دیگر، انتخاب نمی شوند:

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

به طور کلی، از فرم  [att|="val"] می توان برای تطابق قرار دادن هر خصوصیت و مقدار آن، استفاده کرد. فرض کنید در سند HTML چند تصویر داریم و نام هریک از این تصاویر به صورت figure-1.gif یا figure-3.jpg باشد. برای مورد گزینش قرار دادن تمام این تصاویر، می توانیم از سلکتور زیر استفاده کنیم:

img[src|="figure"] {border: 1px solid gray;}

یا اینکه فرض کنید داریم یک فریم ورک CSS یا یک کتابخانه ی الگو ایجاد می کنیم. به جای اینکه از کلاس هایی، مانند  "btn btn-small btn-arrow btn-active" استفاده کنیم، می توانیم یک کلاس به صورت "btn-small-arrow-active" ایجاد کنیم و با استفاده از دستور زیر، عناصری که با آن تطابق دارند را انتخاب کنیم:

*[class|="btn"] { border-radius: 5px;}

<button class="btn-small-arrow-active">Click Me</button>

متداول ترین استفاده از این نوع سلکتورهای خصوصیت، تطابق قرار دادن مقادیر است. همان طور که در بخش آینده، در مقاله ی شبه کلاس lang: در صفحه 88 توضیح خواهیم داد.

مورد تطابق قرار دادن یک کلمه در یک لیست، که با فاصله از هم جدا شده اند

فرض کنید یک خصوصیت داریم که در آن یک لیست از کلمات که با فاصله سفید از یکدیگر جدا شده اند وجود دارد، این امکان وجود دارد تا عناصر آن را بر اساس حضور هریک از آن کلمات، گزینش کنیم. بعنوان یک مثال قدیمی، می توانیم خصوصیت class را در HTML را مثال بزنیم، که می تواند یک یا چند کلمه را بر اساس مقدار آن بپذیرد. به مثال زیر توجه کنید:

<p class="urgent warning">When handling plutonium, care must be taken to
avoid the formation of a critical mass.</p>

 فرض کنید می خواهیم عناصری را انتخاب کنیم که خصوصیت class آنها حاوی کلمه ی warning باشد. برای انجام این کار، می توانیم از یک سلکتور خصوصیت استفاده کنیم:

p[class~="warning"] {font-weight: bold;}

 به حضور علامت کلاه آ(~) در سلکتور بالا توجه کنید. این علامت، کلید انتخاب بر اساس حضور یک کلمه در داخل یک مقدار از یک خصوصیت، که با فاصله سفید از یکدیگر جدا شده اند، است. اگر علامت کلاه آ را برداریم، یک سلکتور خصوصیت مقدارِ دقیق خواهیم داشت؛ که در بخش قبلی توضیح داده شد.

این ساختار سلکتور، با علامت گذاری کلاس با استفاده از نقطه،  که در مقاله ی  استفاده از سلکتور id یا class در CSS توضیح داده شده است، معادل است. بنابراین دستور p.warning و p[class~="warning"] وقتی که در اسناد HTML اعمال شوند، معادل یکدیگر هستند. در زیر یک مثال وجود دارد که یک نسخه ی HTML از کد “PlanetML” که قبلا توضیح داده ایم می باشد:

<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>

 برای ایتالیک(italicize) کردن تمام عناصری که کلمه barren در خصوصیت calss آنها وجود دارد، می توانیم به صورت زیر عمل کنیم:

span[class~="barren"] {font-style: italic;}

سلکتور بالا، دو عنصر اول در در کدهای بالایی را مورد گزینش قرار می دهد و متن آنها را به صورت کج یا ایتالیک نشان می دهد؛ به تصویر 2.11 توجه کنید. این کار، مشابه با استفاده از کد زیر است:

span.barren {font-style: italic;}

 (تصویر 2.11؛ گزینش عناصر بر اساس بخشی از مقدار خصوصیت آنها)

بنابراین، چرا زحمت بکشیم و از سلکتور خصوصیت کلاه آ و علامت مساوی(یعنی ~=) در HTML استفاده کنیم؟ زیرا این سلکتور می تواند برای هر خصوصیتی مورد استفاده قرار گیرد، نه فقط در خصوصیت class . بعنوان مثال، ممکن است یک سند داشته باشیم که حاوی تعداد زیادی تصویر(images) است؛ و فقط برخی از آنها شکل(figures) هستند. ما می توانیم از سلکتور مقدار جزئی خصوصیت، که متن عنوان (title) را مورد هدف قرار می دهد و تنها برای انتخاب شکل های(figures) سند مورد استفاده قرار می گیرد، استفاده کنیم.

img[title~="Figure"] {border: 1px solid gray;}

این دستور، هر تصویری که متن عنوان(title) آن حاوی کلمه Figure باشد را مورد انتخاب قرار می دهد. بنابراین تا زمانی که تمام شکل های(figures) ما یک عنوان داشته باشند که صورت زیر باشد، این دستور تصاویر را مورد تطابق قرار خواهد داد:

“Figure 4. A baldheaded elder statesman” 

در همین زمینه، سلکتور img[title~="Figure"] ،همچنین یک خصوصیت title که حاوی مقدار  “How to Figure Out Who’s in Charge” باشد را نیز مورد تطابق قرار می دهد. هر تصویری(image) که خصوصیت title نداشته باشد، یا مقدار title آن حاوی کلمه ی Figure نباشد، مورد تطابق قرار نمی گیرد.

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

گاهی اوقات می خواهیم عناصری را بر اساس بخشی از مقدار خصوصیت آنها گزینش کنیم، اما این مقادیر به صورت یک لیست از کلمات که با فاصله سفید از یکدیگر جدا شده باشند، نیستند. در اینگونه موارد، می توانیم از سلکتور [att*="val"] برای تطابق قرار دادن زیر-رشته هایی که در هر جا، در درون مقدار این خصوصیت قرار گرفته اند، استفاده کنیم.

بعنوان مثال، کد CSS زیر، هر عنصر span که خصوصیت class آن حاوی زیر-رشته ی could باشد را مورد تطابق قرار می دهد؛ بنابراین هر دوی عباراتی که شامل کلاس “cloudy” هستند، مورد تطابق قرار می گیرند؛ این موضوع در تصویر 2.12 نشان داده شده است:

span[class*="cloud"] {font-style: italic;}

<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>

(تصویر 2.12: انتخاب عناصر بر اساس زیر-رشته ی قرار گرفته در داخل مقادیر خصوصیت ها، دو کلمه ی Venus و Earth ایتالیک شده اند)

همان طور که مشاهده می کنید، برای سلکتورهای خصوصیت، قابلیت های مفید فراوانی وجود دارد. بعنوان مثال، فرض کنید می خواهیم هر لینکی که به وب سایت O’Reilly داده شده است را استایل دهی کنیم. به جای اینکه همه ی آنها را کلاس دهی کنیم و استایل هایی را بر اساس آن کلاس ها بنویسیم، می توانیم از دستور زیر استفاده کنیم:

a[href*="oreilly.com"] {font-weight: bold;}

شما محدود به خصوصیت های class و href نیستید.در اینجا، می توانید از هر خصوصیتی استفاده کنید، مثلاً می توانید از خصوصیات title و alt و src و id و غیره استفاده کنید. اگر خصوصیت مورد نظر شما یک مقدار داشته باشد، می توانید بر اساس یک زیر-رشته در داخل آن مقدار، عناصر را استایل دهی کنید.

دستور زیر، تصاویری را انتخاب می کند که در داخل URL آنها، عبارت “space” وجود داشته باشد:

img[src*="space"] {border: 5px solid red;}

به طور مشابه، دستور زیر عناصر input را انتخاب می کند که یک title داشته باشند و در داخل مقدار آن title، زیر-رشته ی “format” وجود داشته باشد:

input[title*="format"] {background-color: #dedede;}

<input type="tel" title="Telephone number should be formatted as XXX-XXX-XXXX" pattern="\d{3}\-\d{3}\-\d{4}">

یک استفاده ی متداول از زیر-رشته های سلکتور خصوصیت عمومی، این است که بخشی از یک کلاس را در کتابخانه ی الگوی نام های کلاس(in pattern library class names) مورد تطابق قرار دهد. اگر بادقت به مثال ها توجه کنید، می بینید که می توانیم هر نام کلاسی که با عبارت "btn" شروع می شود و حاوی زیر-رشته ی "arrow" است که قبل از آن یک خط تیره(-) قرار دارد را مورد هدف قرار دهیم:

*[class|="btn"][class*="-arrow"]:after { content: "▼";}

<button class="btn-small-arrow-active">Click Me</button>

تطابق ها دقیق هستند: اگر ما یک فاصله ی سفید را در سلکتور خود قرار دهیم، آنگاه این فاصله ی سفید باید در مقدار خصوصیت نیز وجود داشته باشد. تنها اگر زبان سند اصلی به حروف بزرگ و کوچک حساس باشد، نام های خصوصیت ها و مقادیر آنها نیز باید به حروف بزرگ و کوچک حساس باشند. نام کلاس ها، عنوان ها(title) و URL ها و ID ها همه به حروف بزرگ و کوچک حساس هستند، اما مقادیر کلیدی خصوصیت های html ، مثل type یا نوع input ها، به حروف بزرگ و کوچک حساس نیستند:

input[type="CHeckBoX"] {margin-right: 10px;}

<input type="checkbox" name="rightmargin" value="10px">

گزینش کردن یک زیر-رشته در ابتدای یک مقدار از یک خصوصیت

در مواردی که بخواهیم عناصری را بر اساس یک زیر-رشته، در ابتدای یک مقدار از یک خصوصیت گزینش کنیم، آنگاه می توانیم از سلکتور خصوصیت الگوی [att^="val"] استفاده کنیم. این کار به خصوص زمانی مفید است که بخواهیم نوع لینک ها را به طور متفاوت استایل دهی کنیم. این موضوع در تصویر 2.13 نشان داده شده است:

a[href^="https:"] {font-weight: bold;}
a[href^="mailto:"] {font-style: italic;}

 (تصویر 2.13 : انتخاب عناصر بر اساس زیر-رشته ها که در ابتدای مقادیر خصوصیت قرار گرفته اند)

یک استفاده ی دیگر وقتی است که می خواهیم تمام تصاویر درون یک مقاله، که شکل یا figure نیز هستند، مانند شکل های درون این کتاب ، را استایل دهی کنیم. فرض می کنیم که متن خصوصیت alt برای هر شکل(figure) با عبارت “Figure 5” آغاز شده شده باشد؛ که در این مورد یک فرض کاملاً منطقی است؛ سپس می توانیم تنها تصاویری(images) را انتخاب کنیم که به صورت زیر هستند:

img[alt^="Figure"] {border: 2px solid gray; display: block; margin: 2em auto;}

 اشکال احتمالی در اینجا این است که هر عنصر img که خصوصیت alt آن با عبارت "Figure" آغاز شود نیز انتخاب می شود؛ یک استفاده ی دیگر، این است که تمام رویداد های تقویم که در روز دوشنبه اتفاق افتاده اند را گزینش کنیم. در این مورد، فرض می کنیم که تمام رویداد ها یک خصوصیت title دارند که حاوی یک تاریخ به فرمت Monday, March 5th, 2012 است؛ اگر بخواهیم این تاریخ ها را انتخاب کنیم، می توانیم از سلکتور [title^="Monday"] استفاده کنیم.

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

برای گزینش یک زیر-رشته در انتهای یک خصوصیت می توانیم از الگوی [att$="val"] استفاده کنیم. یک استفاده ی متداول برای این قابلیت، این است که لینک ها را بر اساس نوع پسوند آنها، مانند استایل دهی سندهای pdf، استایل دهی کنیم. مانند تصویر شماره 2.14:

a[href$=".pdf"] {font-weight: bold;}

 (تصویر 2.14 : انتخاب عناصر بر اساس زیر-رشته هایی که در انتهای مقادیر خصوصیت قرار دارند)

به طور مشابه، ما می توانیم تصاویر را بر اساس فرمت آنها مورد گزینش قرار دهیم:

img[src$=".gif"] {...}
img[src$=".jpg"] {...}
img[src$=".png"] {...}

 اگر بخواهیم مثال تقویم که در بخش قبلی زدیم را ادامه دهیم، می توانیم تمام رویدادهایی که در یک سال مشخص اتفاق افتاده اند را با استفاده از سلکتور [title$="2015"] انتخاب کنیم.

 نکته: ممکن است متوجه شده باشید که ما همه ی مقادیر خصوصیت ها را در سلکتور خصوصیت، در داخل علامت های نقل قول(کوتیشن) قرار داده ایم. اگر مقدار مورد نظر حاوی کاراکترهای خاص باشد یا با یک خط تیره(-) یا یک رقم شروع شود، یا در غیر این صورت، مانند یک شناسه ی(identifier) نامعتبر باشد و نیاز داشته باشد تا مانند یک رشته، در داخل کوتیشن قرار گیرد، استفاده از علامت نقل قول(کوتیشن) لازم است. برای امنیت بیشتر، توصیه می کنیم همواره مقدار خصوصیت ها را در سلکتورهای خصوصیت، در داخل علامت های نقل قول(کوتیشن) قرار دهید؛ حتی اگر فقط نیاز به ساخت رشته ها از شناسه های نامعتبر داشته باشید.