سلکتورهای نوع، کلاس و ID در CSS — آموزش CSS (بخش هفتم)

در این بخش از سری مقالات آموزش CSS به بررسی برخی از ساده‌ترین سلکتورهای CSS می‌پردازیم که بیشترین کاربرد را نیز دارند. این موارد شامل سلکتورهای نوع ، کلاس و ID در CSS هستند. برای مطالعه بخش قبلی روی لینک زیر کلیک کنید:

• سلکتورهای CSS — آموزش CSS (بخش ششم)

سلکتورهای نوع

سلکتور نوع برخی اوقات به نام سلکتور tag name یا سلکتور element نیز نامیده می‌شود، چون یک تگ/عنصر HTML را در سند انتخاب می‌کند. در مثال زیر از span استفاده کنیم، سلکتورهای em و strong استفاده کرده‌ایم. از این رو همه وهله‌های عناصر <span> ،<em> و <strong> استایل‌بندی شده‌اند.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

در مثال زیر تلاش کنید یک قاعده CSS به عنصر <h1> اضافه کنید و رنگ آن را به آبی تغییر دهید.

سلکتور سراسری

سلکتور سراسری به وسیله علامت ستاره (*) تعیین می‌شود و همه چیز را در سند انتخاب می‌کند. درصورتی‌که به عنصر دیگر و یک کامبیناتور اتصال یابد، همه عناصر داخل عنصر والد را انتخاب می‌کند.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

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

این نوع رفتار را در پاره‌ای موارد می‌توان در reset stylesheets دید که همه استایل‌بندی مرورگر را حذف می‌کنند. این حالت در یک زمان خاص بسیار محبوب بود، اما حذف کردن همه استایل‌بندی‌ها به طور معمول به معنای این است که باید همه این موارد را در ادامه به صوت دستی اضافه کنیم. از این رو برای بررسی موقعیت‌های خاصی مانند آن چه در بخش زیر ارائه شده است، معمولاً باید از سلکتور سراسری با دقت بیشتری استفاده کنیم.

استفاده از سلکتور سراسری برای افزایش خوانایی

یکی از کاربردهای سلکتور سراسری، آسان‌تر ساختن خوانایی سلکتورها و روشن‌تر ساختن کاری است که انجام می‌دهند. برای نمونه اگر بخواهیم فرزند نخست هر عنصر <article> را انتخاب کنیم و صرف‌نظر از این که کدام عنصر است آن را bold کنیم، می‌توانیم از سلکتور:first-child استفاده کنیم که در بخش‌های ابعادی در مورد آن بیشتر خواهیم آموخت. این سلکتور به عنوان سلکتور فرزند همراه با سلکتور عنصر <article> عمل می‌کند:

1article :first-child {
2
3}

با این حال ممکن است آن را با article:first-child که همه عناصر <article> که فرزند نخست عنصر دیگری هستند را انتخاب می‌کند، اشتباه بگیرید.

برای اجتناب از این سردرگمی، می‌توانیم یک سلکتور سراسری به سلکتور ‎:first-child‎ اضافه کنیم تا کاری که انجام می‌دهد روشن‌تر شود. این سلکتور هر عنصری که فرزند نخست یک عنصر <article> باشد را انتخاب می‌کند:

1article *:first-child { 
2
3}

سلکتورهای کلاس

سلکتور کلاس با یک نقطه (.) آغاز می‌شود و همه چیز را که آن کلاس رویش اعمال شده در سند انتخاب می‌کند. در مثال زیر یک کلاس به نام highlight. ایجاد کرده‌ایم و آن را در چند جای سند اعمال کرده‌ایم. همه عناصری که کلاس روی آن‌ها اعمال شده باشد هایلایت می‌شوند:

هدف‌گیری کلاس روی عناصر خاص

می‌توانید سلکتوری ایجاد کنید که عناصر خاصی را با کلاس اعمال شده هدف‌گیری می‌کند. در مثال بعدی یک <span> را با کلاس highlight به طرز متفاوتی نسبت به یک عنوان <h1> با کلاس highlight هدف‌گیری می‌کنیم. این کار با استفاده از سلکتور نوع برای عنصر مورد نظر به همراه الحاق کلاس بدون فاصله بین آن‌ها انجام می‌شود.

این رویکرد موجب می‌شود که قابلیت استفاده مجدد کدهای CSS کاهش یابد چون کلاس در این حالت تنها روی آن عنصر خاص اعمال می‌شود و اگر بخواهید این قاعده را روی عنصر دیگری نیز به کار بگیرید، باید سلکتور دیگری اضافه کنید.

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

می‌توان چندین کلاس را به یک عنصر اعمال کرد و آن‌ها را به صورت منفرد هدف‌گیری نمود یا عنصر را تنها هنگامی انتخاب کرد که همه کلاس‌های در سلکتور موجود باشند. این حالت در مواردی مفید است که بخواهیم کامپوننت‌هایی بسازیم که به روش‌های مختلفی در وب‌سایت با هم ترکیب شوند.

در مثال زیر یک <div> داریم که شامل یک یادداشت است. در زمانی که این کادر کلاس notebox دارد یک حاشیه خاکستری اعمال می‌شود. اگر یک کلاس warning یا danger نیز داشته باشد، border-color تغییر پیدا می‌کند.

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

سلکتورهای ID

سلکتور ID با یک # به جای کاراکتر نقطه آغاز می‌شود، اما اساساً به همان روش سلکتور کلاس مورد استفاده قرار می‌گیرد. با این حال هر ID می‌تواند تنها یک بار در سند استفاده شود. این سلکتور عنصری را انتخاب می‌کند که ID روی آن تنظیم شده باشد. می‌توان قبل از سلکتور ID از یک سلکتور نوع برای هدف‌گیری دقیق عنصر در صورت وجود دو عنصر با یک ID استفاده کرد. هر دو این موارد را در مثال زیر می‌بینید:

نکته: چنان که در بخش قبلی در مورد سطح خصوصیت (specificity) آموختیم، یک ID سطح خصوصیت بالاتری دارد و اغلب سلکتورهای دیگر را باطل می‌کند. به همین جهت کار کردن با آن‌ها دشوار است. در اغلب موارد بهتر است یک کلاس به عنصر اضافه کنیم تا این که از ID استفاده کنیم، با این حال اگر به دلیل عدم دسترسی به markup و امکان ویرایش آن، استفاده از ID تنها روش برای هدف‌گیری عناصر باشد، این روش مناسب خواهد بود.

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

• سلکتورهای خصوصیت در CSS --- آموزش CSS (بخش هشتم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• آموزش طراحی وب با CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
• ۱۰ نمونه کد ساده CSS که می‌توان در ۱۰ دقیقه آموخت

==