مدتی می‌شود که از CSS استفاده می‌کنم، اما یک مورد زیاد به اعماقش وارد نشده بودم، انتخاب کننده‌های CSS بود. همه ما انتخاب کننده‌ها را کاملا می‌شناسیم، اما با گذر زمان، عادت می‌کنیم که از انتخاب کننده‌های مشابه و تکراری بر روی همه پروژه‌ها استفاده کنیم. پس تصمیم گرفتم که یک بررسی عمقی بر روی انتخاب کننده‌ها داشته باشم، و در این فرایند به برخی موارد بر خوردم که حتی برای خود من هم جدید بودند، یا این که به روشی متفاوت استفاده شده بودند. حال بیایید به آن‌ها وارد شویم.
انتخاب کننده‌های ترکیبی
بیایید با یک محدوده آشنا شروع کنیم. انتخاب کننده‌های ترکیبی برای انتخاب عناصر فرزند استفاده می‌شوند، و مدتی می‌شود که بر روی عرصه هستند.
- انتخاب کننده فرزند معمولی، برای مثال: A B
- انتخاب کننده فرزند مستقیم، برای مثال: A > B
- انتخاب کننده فرزند هم سطح مجاور، برای مثال: A + B
- انتخاب کننده فرزند هم سطح معمولی، مثلا: A ~ B
انتخاب کننده مجاور A + B باید برایتان آشنا باشد. این انتخاب کننده عنصر B را انتخاب می‌کند که سریعا به دنبال عنصر A می‌آید. اما انتخاب کننده هم سطح معمولی A ~ B چه؟ این انتخاب کننده، تمام عناصر B که به دنبال A می‌آیند را انتخاب می‌کند. می‌توانید در این لینک در وبسایت codepen.io، هر دوی آن‌ها را در عمل ببینید.
در این مثال، New York انتخاب شده است؛ زیرا سریعا به دنبال ردیف اول می‌آید، و از آنجایی که انتخاب کننده فرزند هم سطح معمولی با تمام شهرهای بعد از مورد چهارم مطابق است، دو شهر آخر برجسته شده‌اند.
انتخاب کننده‌های صفت
این انتخاب کننده‌ها وقتی می‌خواهید عناصری که دارای صفاتی با مقادیر خاص هستند را تطبیق دهید، بسیار منعطف هستند.
لینک صفحه در وبسایت codepen.io
این مثال نشان می‌دهد که انتخاب کردن تمام عناصر ورودی چک باکس و اعمال استایل به labelهای مربوط به آن‌ها، باعث می‌شود که bold شده و رنگ آبی به خود بگیرند. سپس استایل مربوط به چک باکسی خاص با نام chk2 را بازنویسی می‌کنیم و labelهای مربوط به آن را قرمز می‌کنیم. به این که labelهای مربوط به باقی عناصر تغییری نکرده‌اند، دقت کنید. گرچه انتخاب کننده‌های صفت فقط برای عناصر فرم نیستند، بلکه می‌توانند صفات موجود بر روی هر عنصری را هدف قرار دهند. و البته می‌توانید آن‌ها را با هر صفتی تطبیق دهید، نه فقط آن‌هایی که پشتیبانی شده‌آند. به علاوه، می‌توانید به این صورت وجود یک صفت را بررسی کنید:
button[icon]
این انتخاب کننده، با عنصر <button> که شامل یک صفت icon است، چه وقتی که خالی باشد و چه وقتی که مقداری خاص برایش تعیین شده است، مطابق است.
برخی مثال‌های بیشتر:
لینک صفحه در وبسایت codepen.io
اولین لینک، هیچ صفتی به نام target ندارد؛ پس در نتیجه تطبیق داده نشده است. دو لینک بعدی مطابق هستند، زیرا یک صفت target خالی، یا به همراه یک مقدار خاص دارند. در آخر، از آنجایی که لینک آخر با صفت fluffy مطابق است، برابر با صورتی قرار داده شده است. مقدار آن نامرتبط است و فقط باید با انتخاب کننده a[fluffy] برابر باشد.
یک مثال کاربردی این مورد، می‌تواند برای برجسته کردن عکس‌هایی باشد که صفت alt را ندارند. این صفت برای دسترسی به این ویژگی مورد نیاز است و برای اهداف SEO بسیار مهم است، تا بتوانید مطمئن شوید که تمام عناصر عکس شامل این صفت می‌شوند.
می‌توانیم از این قانون برای رسیدن به این هدف پیروی کنیم:
img:not([alt]) {
border: 2px red dashed;
}
لینک صفحه در وبسایت codepen.io
اگر می‌خواهید یک بخش خاص از مقدار صفت را تطبیق دهید، چند انتخاب کننده پر کاربرد وجود دارند که می‌توانند به شما کمک کنند.
- A[attr^=val] - صفت با مقدار شروع می‌شود.
- A[attr|=val] - صفت با مقدار شروع می‌شود یا این که مورد اول موجود در یک لیست جداسازی شده با استفاده از خط فاصله است.
- A[attr$=val] - صفت با یک مقدار تمام می‌شود.
- A[attr*=val] - مقدار در هر جایی از صفت بروز می‌دهد.
- A[attr~=val] - مقدار در یک لیست جداسازی شده با استفاده از فاصله، با صفت مطابق است.
در اینجا، می‌توانید مثالی از هر کدام را ببینید:
لینک صفحه در وبسایت codepen.io
دو مثال اول بسیار مشابه هستند، البته A[attr|=val] همچنین با مقداری که به دنبال خود یک رشته جداسازی شده با استفاده از خط فاصله را دارد نیز مطابق است. این می‌تواند برای تطبیق دادن صفات زبان پرکاربرد باشد. برای مثال: <p lang=”en-us”>.
تطبیق دادن پسوند فایل‌ها با استفاده از A[attr$=”val”] ساده شده است، و به همراه ::after شما می‌توانید فایل مطابق را نیز نمایش دهید. به نحوه استفاده از attr() و ادغام آن با یک رشته استاتیک دقت کنید.
انتخاب کننده A[attr*=val] به شما نشان می‌دهد که چگونه می‌توانید یک دامنه را بدون توجه به پروتکل و زیردامنه مورد استفاده در آن، تطبیق دهید.
در آخر، انتخاب کننده A[attr~=val] را داریم که برای تطبیق دادن یک مقدار در یک صفت ساخته شده از لیستی دارای مقادیر جداسازی شده با استفاده از فاصله، بسیار عالی است.
تمام مثال‌های بالا، انتخاب کننده‌ها به حروف بزرگ یا کوچک حساس هستند؛ اما یک تکنیک خاص برای این مسئله وجود دارد. اگر قبل از بستن براکت یک «i» اضافه کنیم، می‌توانیم تطبیق حساس به حروف بزرگ و کوچک را روشن کنیم.
لینک صفحه در وبسایت codepen.io
اکثر مرورگرهای رایج به جز Internet Explorer و Microsoft Edge، از حساسیت به حروف بزرگ و کوچم پشتیبانی می‌کنند.
انتخاب کننده‌های رابط کاربری
اگر با استایل‌بندی فرم‌ها کار کرده باشید، قطعا به این شبه کلاس‌ها بر خورده‌اید:
- :enabled
- :disabled
- :checked
برای مثال می‌توانیم از :checked برای استایل‌بندی یک لیست ساده استفاده کنیم.
لینک صفحه در وبسایت codepen.io
این کار کاملا استاندارد است، اما برخی شبه کلاس‌های دیگر وجود دارند که می‌توانیم استفاده کنیم.
:default با یک یا چند عنصر که در مجموعه‌ای از عناصر مربوط به هم پیشفرض هستند، مطابق است. این مورد می‌تواند با دکمه reset نیز ترکیب شود.
لینک صفحه در وبسایت codepen.io
می‌توانیم مستقیما از CSS و با استفاده از شبه کلاس‌ها، تطبیق دهیم که آیا عنصری قبل از تایید یک فرم لازم است یا نه، و این که مقادیر ورودی صحیح هستند یا نه.
- :valid
- :invalid
- :required
- :optional
لینک صفحه در وبسایت codepen.io
اگر شروع به تایپ کردن داخل فیلدهای ایمیل شخصی کنید، باید ایمیل وارد شده به یک حالت معتبر باشد. و البته، آدرس ایمیل کاری همیشه باید وارد شود و نمی‌تواند خالی باشد. به نحوه اتصال شبه کلاس‌ها (مثلا :required:invalid) نیز دقت کنید.
سپس دو شبه کلاس داریم که اگر یک عنصر فرم (که از صفات min و max پشتیبانی می‌کند) در داخل محدوده باشد یا نه، می‌تواند تطبیق داده شود.
- :in-range
- :out-of-range
لینک صفحه در وبسایت codepen.io
باز هم در اینجا می‌توانیم از دکمه ریست برای بازنشانی مقادیر عناصر ورودی استفاده کنیم.
برای جمع‌بندی این بخش، بیایید نگاهی به شبه کلاس‌های :read-only، :read-write و :placeholder-shown داشته باشید.
لینک صفحه در وبسایت codepen.io
استفاده از این موارد، شما را قادر می‌سازد تا به راحتی عناصری که read-only یا قابل نوشتن هستند را تطبیق دهید. عناصر مطابق حتما نباید ورودی‌های فرم باشند.
در آخر، :placeholder-shown با عناصری که هنوز تحت تعامل قرار نگرفته‌اند مطابق است و متن جانگهدار پیشفرض را نمایش می‌دهد. از آنجایی که این انتخاب کننده خاص هنوز آنچنان پشتیبانی نشده است، بهتر است با احتیاط استفاده شود.
انتخاب کننده‌های ساختاری
انتخاب کننده‌های ساختاری بسیار قدرتمند بوده، و بر پایه موقعیت عناصر در DOM، با آن‌ها مطابق هستند. این انتخاب کننده‌ها انعطاف لازم برای تطبیق عناصر به صورت کاملا خالص با CSS را می‌دهند که در غیر این صورت نیازمند JavaScript برای این کار خواهید بود. این نوع انتخاب کننده با باقی موارد معرفی شده تفاوت دارد، زیرا برخی از آن‌ها شما را قادر می‌سازند تا یه پارامتر را منتقل کرده و نحوه کار انتخاب کننده را تغییر دهید.
برای مثال :nth-child()، یک مقدار را که با یک عنصر فرزند خاص مربوط به محفظه والد، مطابق است را دریافت می‌کند.
پس اگر لیستی از آیتم‌ها داشتیم، این انتخاب کننده با سومین مورد مطابق است.
ul:nth-child(3)
گرچه، پارامتر مربوطه حتما نباید یک عدد ساده باشد؛ بلکه می‌تواند یک بیانیه نیز باشد که شبه کلاس‌ها را حتی قدرتمندتر می‌کند.
بیانیه‌های معتبر، موارد زیر هستند:
- ul:nth-child(2) - با دومین عنصر فرزند مطابق است.
- ul:nth-child(4n) - با عناصر فرزند به صورت چهار در میان مطابق است. (۴، ۸، ۱۲...)
- ul:nth-child(2n + 1) - با عناصر به صورت ۲ در میان به علاوه ۱ مطابق است. (۱، ۳، ۵...)
- ul:nth-child(3n-1) - با عناصر به صورت ۳ تا در میان منهای ۱ مطابق است. (۲، ۵، ۸...)
- ul:nth-child(odd) - با عناصر اعداد فرد مطابق است. (۱، ۳، ۵...)
- ul:nth-child(even) - با عناصر اعداد زوج مطابق است. (۲، ۴، ۶...)
متغیر بیانیه n همیشه با صفر شروع می‌شود؛ پس برای این دریابید دقیقا کدام عناصر مطابق هستند، با صفر شروع کنید، و همینطور ادامه دهید تا لیست عناصر را کمپایل کنید.
می‌توانید با استفاده از این انتخاب کننده‌های ساختاری، از بیانیه‌های ساده استفاده کنید:
- :nth-child()
- :nth-last-child()
- :nth-of-type()
- :nth-last-of-type()
لینک صفحه در وبسایت codepen.io
:nth-last-child() و :nth-last-of-type() بسیار مشابه به :nth-child() و :nth-of-type هستند؛ اما به جای اولین عنصر، با آخرین عنصر مطابق می‌باشند.
می‌توانید با کار کردن با ترکیب‌های مختلف، کارهای خلاقانه‌ای با انتخاب کننده‌ها انجام دهید. برای مثال، مثال قبلی شامل این انتخاب کننده بود:
ul:last-of-type li:nth-last-of-type(2)::after {
content: “ (2nd from end)”;
/* استایل‌های دیگر… */
}
این مورد، با شبه عنصری که از پس از دومین آیتم موجود داخل دومین لیست نامرتب وجود دارد، مطابق است. اگر هر زمان در درک یک انتخاب کننده مشکلی داشتید، بهتر است آن را از راست به چپ بخوانید.
مجموعه بعدی از انتخاب کننده‌ها، انتخاب کننده‌های ساختاری خاصی هستند که فقط با عناصر فرزند مشخصی مطابق می‌باشند. ما نمی‌توانیم برای تغییر رفتار آن‌ها، به آن‌ها بیانیه‌ای منتقل کنیم.
- :first-child
- :last-child
- :only-child
- :first-of-type
- :last-of-type
لینک صفحه در وبسایت codepen.io
در نگاه اول، در اینجا اتفاقات زیادی می‌افتند و باید در هنگام استفاده از این نوع انتخاب کننده‌ها مراقب باشید؛ زیرا ممکن است نتیجه مد نظر را به دست نیاورید.
انتخاب کننده‌های محتوا
این موارد به مجموعه‌ای خاص از انتخاب کننده‌ها برای تطبیق دهی محتویات تعلق دارند. تنها مواردی که برای استفاده در دسترس هستند:
- ::first-line
- ::first-letter
- ::selection
لینک صفحه در وبسایت codepen.io
::first-line و ::first-letter فقط وقتی که به عناصر بلوک اعمال شوند، کار می‌کنند. همچنین مراقب باشید که از ::first-letter فقط بر روی عناصری خاص استفاده کنید.
در اینجا نیز مجموعه‌ای از انتخاب کننده‌های محتویات را می‌بینید که بهتر است نگاهی به آن‌ها داشته باشید:
- ::inactive-selection - محتویات انتخاب شده داخل یک پنجره غیر فعال.
- ::spelling-error - بررسی قوائد و املا برای عناصر قابل ویرایش.
- ::grammer-error - با خطاهای گرامری مطابق است.
- ::marker - با نشانه‌گذارهای آیتم لیست مطابق است.
- ::placeholder - با متون جانگهدار از عناصر فرم مطابق است.
انتخاب کننده‌های متفرقه
حال نوبت به برخی انتخاب کننده‌ها می‌رسد که در هیچ یک از دسته‌های قبلی جای نداشتند.
انتخاب کننده :target یک عنصر با آیدی مطابق با بخشی از URL فعلی را هدف قرار می‌دهد. پس اگر عنصری با آیدی «part1» و URL زیر داشتیم:
https://mysite.com#part1
ما می‌توانیم آن عنصر را با استفاده از این کد تطبیق دهیم:
:target { border: 1px red solid; }
اگر یک انتخاب کننده بزرگ دارید، پس :matches() می‌تواند در ساده‌سازی آن به شما کمک کند. برای مثال اگر این انتخاب کننده را داشتید:
nav p.content,
header p.content,
main p.content,
sidebar p.content,
footer p.content {
margin: 15px;
padding: 10px;
}
می‌توانستید آن را با استفاده از :matches() ساده‌سازی کنید، که معادل با این کد خواهد بود:
:matches(nav, header, main, sidebar, footer) p:content {
margin: 15px;
padding: 10px;
}
این کار، خوانایی stylesheetها را افزایش خواهد داد.
سپس، :any-link را داریم که یک انتخاب کننده راحت است و به مانند ترکیبی از :link و :visited کار می‌کند.
پس این دو انتخاب کننده عملا یکی خواهند بود:
:any-link {
color: red;
}
:link, :visited {
color: red;
}
و این، ما را به آخرین انتخاب کننده در این مقاله می‌رساند:
- :dir()
- :lang()
اما این موارد به زبان وبسایت شما بستگی دارند.
:dir() یک پارامتر ltr یا rtl را بر حسب جهت متنی که می‌خواهید تطبیق دهید، می‌گیرد. پس :dir(rtl) با تمام عناصر موجود با جهت متن شما مطابق خواهد بود.
هر عنصری در HTML می‌تواند زبان به خصوص خود را با استفاده از صفت lang داشته باشد.
<div lang=”en”>The language of this element is set to English.</div>
<div lang=”el”>Η γλώσσα αυτού του στοιχείου έχει οριστεί στα ελληνικά.</div>
<div lang=”is”>Tungumál þessa þáttar er sett á íslensku.</div>
یک متن مشابه در سه تگ <div> وارد شده است، اما کشور خاصی در انتهای محتویات به آن‌ها اضافه شده است. همچنین، کدهای کشور استفاده شده در صفت lang، نمایانگر کشور متناظر هستند.
- en - زبان انگلیسی
- el - زبان یونانی
- is - زبان ایسلندی
عناصر <div> می‌توانند با استفاده از انتخاب کننده :lang() تطبیق داده شوند:
:lang(en) { color: red; }
:lang(el) { color: green; }
:lang(is) { color: blue; }
لینک صفحه در وبسایت codepen.io
و خبر خوب این است که انتخاب کننده lang() همین حال نیز توسط تمام مرورگرهای اصلی پشتیبانی می‌شود.
در نهایت...
امیدوارم این مقاله برای شما پر کاربرد بوده باشد. برای من به شخصه کار با موقعیت‌های مختلف و استفاده از مهارت‌های CSS لذت بخش است. حال کارهای جالبی می‌توانیم با استفاده از CSS انجام دهیم، که قبلا نمی‌توانستیم. این امکانات، برای طراحان موارد پرکاربردی هستند که می‌توانند در CSS و بدون حتی یک خط JavaScript انجام دهند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید