انتخابگر‌ها در CSS | معرفی Selector های مهم CSS


نویسنده:
شنبه ۲۷ اردیبهشت ۱۳۹۹
انتخابگر‌ها در CSS

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

در این جلسه می‌خوانید:


انتخاب با استفاده از نام عنصر

این روش‌ در مواقعی که نیاز به انتخاب کلی عناصر داریم مناسب است. مثلا اگر بخواهیم استایل خاصی را برای تمام عناصر p موجود در صفحه درنظر بگیریم این روش می‌تواند کارآمد باشد. اما برای استایل دهی به یک عنصر خاص (مثلا یک عنصر p خاص در صفحه) اصلا روش مناسبی نیست.

برای استفاده از این روش تنها کافیست تا نام یک عنصر را در قسمت selector دستورات CSS بنویسیم.


انتخاب با استفاده از صفت id

با استفاده از صفت id می‌توانید برای عناصر یک شناسه منحصر به فرد بنویسید. در CSS می‌توان یک عنصر را با استفاده از شناسه (id) آن انتخاب کرد. این روش برای مواقعی که قصد انتخاب تنها یک عنصر خاص در یک صفحه وب را دارید مناسب است. به مثال زیر دقت کنید:

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

نکته: مقدار صفت id باید منحصر بفرد باشد، یعنی نباید هیچ آیدی تکراری در یک صفحه وجود داشته باشد. در مثال بالا شناسه my-paragraph را به هیج عنصر دیگری نمی‌توان داد.


انتخاب با استفاده از صفت class

با استفاده از صفت class می‌توانید برای عناصر یک برچسب تعیین کنید. در CSS می‌توان عناصر را با استفاده از class آنها انتخاب کرد. این روش برای مواقعی که قصد دارید استایل خاصی را به مجموعه عناصری اختصاص دهید کاربرد دارد. به مثال زیر دقت کنید:

مقدار صفت class مانند id منحصر بفرد نیست، به همین علت ما کلاس my-font را به یکی از عناصر p و عنصر h3 داده‌ایم، بنابراین استایلی را که برای کلاس my-font می‌نویسیم روی هر دو عنصر اعمال می‌شود.

برای انتخاب نام کلاس در قسمت selector دستورات CSS، کافیست تنها قبل از نام کلاس یک کاراکتر نقطه قرار دهید.


انتخاب همزمان چندین عنصر

می‌توان با استفاده از کاراکتر ویرگول چند انتخاب مختلف انجام داد. به مثال زیر توجه کنید:

در مثال بالا عناصری که کلاس my-class دارند، عنصری که آیدی my-id دارد و تمام عناصر div موجود در صفحه، فونت متن آنها روی tahoma تنظیم می‌شود. به همین راحتی می‌توان چند انتخابگر را باهم ترکیب کرد.


انتخاب با استفاده از کاراکتر *

کاراکتر * یعنی همه عناصر، وقتی بخواهیم به همه عناصر موجود در صفحه استایل خاصی را اختصاص دهیم، می‌توانیم از این selector استفاده کنیم.


رابطه پدر و فرزندی در انتخابگر‌ها

همانطور که می‌دانید می‌توان عناصر HTML را بصورت تودرتو نوشت. در CSS هم می‌توان بر همین اساس عنصری را انتخاب کرد. کد HTML زیر را درنظر بگیرید:

دو پاراگراف داریم، اولی فرزند مستقیم و دومی فرزند غیر مستقیم عنصری با آیدی myBox است، در CSS برای تعیین تمام فرزندها (مستقیم و غیرمستقیم) از کاراکتر فاصله (space) و برای تعیین فرزند‌های مستقیم از کاراکتر بزرگتری ( < ) استفاده می‌شود. کد CSS زیر را در نظر بگیرید:

در دستور اول، کل عناصر p موجود در عنصری با آیدی myBox را انتخاب کردیم و فونت tahoma را برای آنها تنظیم کردیم.

در دستور دوم، فقط عنصر p که فرزند مستقیم عنصری با آیدی myBox است را انتخاب کردیم و رنگ متن آن را آبی کرده‌ایم.


در این جلسه با مهم‌ترین انتخابگر‌ها در CSS آشنا شدید. selector های پیشرفته‌تری هم وجود دارند، اما در این درس سعی شده تا کاربردی ‌ترین آنها گفته شود.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *