سی ایس ایس حصول انتخاب کنندگان کی تفصیلات

CSS 2 نے ویژگی اپریشن شروع کیا.

ویژگی اپریشن کا استعمال کیا جاسکتا ہے تاکہ عناصر کی ویژگی اور ویژگی کا اپریشن کا انتخاب کیا جاسکے。

سادے ویژگی اپریشن

اگر آپ چاہتے ہیں کہ کسی بھی اپریشن کا عناصر انتخاب کریں جو کسی ویژگی کا اپریشن رکھتا ہوا ہوا ہو، تو سادے ویژگی اپریشن استعمال کریں.

مثال 1

اگر آپ چاہتے ہیں کہ تمام عناصر جو عنوان (title) رکھتا ہوا ہوا ہو، ان کو لال رنگ میں تبدیل کریں تو یہ طرح لکھ سکتے ہیں:

*[title] {color:red;}

آیا امتحان کنید.

مثال 2

علاوہ ازیں، صرف آنکھوں کا رنگ بھرنا چاہئیں جو href کا اپریشن رکھتا ہوا ہو، اس طرح کا استعمال کریں:

a[href] {color:red;}

آیا امتحان کنید.

مثال 3

بھی سخت کریں کہ کتنی اپریشن کا انتخاب کریں، صرف کافی ہوگا کہ کچھ اپریشن سیکشنس کو جوڑ دیئے جائیں。

مثال میں، اگر چاہئیں کہ وہ HTML لینک جو بھی href اور title کا استعمال کراتی ہیں، بنائے گا، تو اس طرح لکھ سکتے ہیں:

a[href][title] {color:red;}

آیا امتحان کنید.

مثال 4

اس خاصیاتی کا استعمال کئی خلاقیت میں کیا جاسکتا ہے۔

مثال میں، تمام alt کا استعمال کرنے والی تصاویر پر استایل لگا سکتے ہیں، تاکہ ان کا اشارہ زیادہ واضح ہو:

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

آیا امتحان کنید.

توجه:یہ مثال بہت زیادہ تجرباتی طور پر استعمال کیا جاسکتا ہے، جیسے تصاویر کی پوری طرح صحیح ہونے کا پتہ لگانا۔

مثال 5: XML دستاویز کے لئے اپریشن کا استعمال

XML دستاویز میں انتخاب کا اپریشن بہت مفید ہوتا ہے، کیونکہ XML زبان کا استعمال عناصر اور اپریشن کا نام دینے کا تذکرہ کرتا ہے۔

اگر چاہئیں کہ وہ XML دستاویز میں سارے planet عناصر جو moons کا اپریشن کا حامل ہیں، بنائے گا، تو اس طرح لکھ سکتے ہیں:

planet[moons] {color:red;}

یہ اس کو تیرا کا دوسرے اور تیسرے عناصر کا متن بنائے گا، لیکن پہلے عناصر کا متن نہیں بنائے گا:

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

نتیجه را مشاهده کنید

خصوصی اپریشن کی بنیاد پر انتخاب

ایک اضافی انتخاب کو کم سے کم کرکے، اب صرف ایسے عناصر کو چن سکتے ہیں جو کسی معین کا اپریشن کا حامل ہیں۔

مثال 1

مثال 1، اگر چاہئیں کہ وہ لینک جو ویب سروئئر پر کسی معین دستاویز کی طرف دیکھ رہا ہے، بنائے گا، تو اس طرح لکھ سکتے ہیں:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

آیا امتحان کنید.

مثال 2

سادہ اپریشن کا انتخاب کی طرح، بہت سے اپریشن جوئس کا استعمال کیا جاسکتا ہے تاکہ ایک سند میں کسی ایک انتخاب کو کیا جاسکے。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

یہ اس کو تیرا کا پہلا لینک کا متن بنائے گا، لیکن دوسرے یا تیسرے لینک کو اثر نہیں ہوگا:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

آیا امتحان کنید.

مثال 3

همانطور که می‌دانید، زبان XML نیز می‌تواند از این روش برای تنظیم استایل استفاده کند.

حالا بگذارید به مثال سیارات برگردیم. فرض کنید می‌خواهید تنها عناصر planet با ارزش moons برابر با 1 را انتخاب کنید:

planet[moons="1"] {color: red;}

این کد دومین عنصر از برچسب‌های زیر را قرمز می‌کند، اما اولین و سومین عنصر تحت تأثیر قرار نمی‌گیرند:

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

نتیجه را مشاهده کنید

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

لطفاً توجه داشته باشید که این فرمت نیاز به تطابق کامل با ارزش خاصیت دارد.

اگر ارزش خاصیت شامل لیستی از ارزش‌ها با استفاده از فضای خالی جدا شده باشد، ممکن است مشکلات تطابق رخ دهد.

به این برچسب‌های قطعه‌ای فکر کنید:

<p class="important warning">این پاراگراف یک هشدار بسیار مهم است.</p>

اگر به این شکل بنویسید p[class="important"]، این قاعده نمی‌تواند با نمونه برچسب تطابق یابد.

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

p[class="important warning"] {color: red;}

آیا امتحان کنید.

انتخاب‌کننده خاصیت بخشی

اگر نیاز دارید بر اساس یک کلمه خاص از لیست ارزش‌های خاصیت انتخاب کنید، باید از تیک (~) استفاده کنید.

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

p[class~="important"] {color: red;}

آیا امتحان کنید.

اگر تیک سمت چپ را نادیده گرفتید، به این معناست که باید یک تطابق کامل ارزش داشته باشد.

تفاوت بین انتخاب‌کننده خاصیت بخشی و نکته‌گذاری نام کلاس

این انتخاب‌کننده معادل نکته‌گذاری نام کلاس در انتخاب‌کننده کلاس است که قبلاً درباره آن صحبت کرده‌ایم.

یعنی p.important و p[class="important"] هنگام اعمال به مستند HTML معادل هستند.

پس چرا باید انتخاب‌کننده خاصیت ~=" وجود داشته باشد؟ زیرا می‌تواند برای هر خاصیت استفاده شود، نه فقط برای class.

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

img[title~="تصویر"] {border: 1px solid gray;}

این قانون تمام تصاویری که متن title شامل "Figure" است را انتخاب می‌کند. تصاویری که ویژگی title ندارند یا متن title شامل "Figure" نیست، با این قانون تطبیق نمی‌یابند.

آیا امتحان کنید.

انتخاب‌گرهای تطبیق بخش مقادیر

در اینجا یک بخش انتخاب‌گر پیشرفته‌تر معرفی می‌شود که پس از تکمیل CSS2 منتشر شده است و شامل بخش‌های بیشتری از انتخاب‌گرهای بخش مقادیر است. بر اساس تعریف استاندارد، باید به آن "انتخاب‌گرهای تطبیق بخش مقادیر" گفته شود.

بسیاری از مرورگرهای مدرن این انتخاب‌گرها را پشتیبانی می‌کنند، از جمله IE7.

در جدول زیر، یک جمع‌بندی ساده از این انتخاب‌گرها آورده شده است:

نوع وصف
[abc^="def"] تمام عناصر با مقادیر abc که با "def" شروع می‌شود را انتخاب کنید
[abc$="def"] تمام عناصر با مقادیر abc که با "def" پایان می‌یابد را انتخاب کنید
[abc*="def"] تمام عناصر با مقادیر abc که شامل زیرشاخه "def" است را انتخاب کنید

می‌توان فکر کرد که این انتخاب‌گرها کاربردهای بسیاری دارند.

به عنوان مثال، اگر می‌خواهید به تمام لینک‌هایی که به CodeW3C.com اشاره دارند، استایل بدهید، نیازی نیست که برای تمام این لینک‌ها class مشخص کنید و سپس استایل‌ها را بر اساس این کلاس بنویسید، بلکه باید فقط این قانون را بنویسید:

a[href*="codew3c.com"] {color: red;}

آیا امتحان کنید.

توجه:هر ویژگی می‌تواند با این انتخاب‌گرها استفاده شود.

نوع انتخاب‌گر ویژگی خاص

در نهایت، از شما معرفی انتخاب‌گرهای ویژگی خاص.

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

این قانون تمام عناصر با ویژگی lang برابر با en یا شروع شده با en- را انتخاب می‌کند. بنابراین، سه عناصر اول از این نمونه‌های برچسب انتخاب می‌شوند و دو عناصر بعدی انتخاب نمی‌شوند:

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

آیا امتحان کنید.

به طور کلی، [att|="val"] می‌تواند برای هر ویژگی و مقادیر آن استفاده شود.

فرض کنید یک مستند HTML شامل مجموعه‌ای از تصاویر باشد که نام فایل هر یک از این تصاویر به صورت زیر باشد: figure-1.jpg و figure-2.jpgپس می‌توان از انتخاب‌گرهای زیر برای تطبیق تمام این تصاویر استفاده کرد:

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

آیا امتحان کنید.

طبیعتاً، یکی از کاربردهای رایج‌ترین این انتخاب‌گرهای ویژگی، تطبیق با مقادیر زبانی است.

سی ایس ایس انتخاب کنندگان مراجع دستورbooک

انتخاب کنندگان وصف
[حصول] مخصوص قیمت کا حامل عنصر کو پتہ لگانا
[حصول=قیمت] مخصوص قیمت کا حامل عنصر کو پتہ لگانا، جو مخصوص قیمت کا حامل عنصر میں آتا ہے
[حصول~=قیمت] مخصوص قیمت کا حامل عنصر کو پتہ لگانا، جو مخصوص قیمت کا حامل عنصر میں آتا ہے
[حصول|=قیمت] مخصوص قیمت کا حامل عنصر کو پتہ لگانا، جو پورا الفاظ میں آتا ہے
[حصول^=قیمت] قیمت کی جانب سے شروع ہونے والی حصول کا حامل ہر عنصر کو پتہ لگانا
[حصول$=قیمت] قیمت کی جانب سے ختم ہونے والی حصول کا حامل ہر عنصر کو پتہ لگانا
[حصول*=قیمت] مقابلہ حصول کی قیمت میں مخصوص قیمت کا حامل ہر عنصر کو پتہ لگانا