ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

سلکتور ها در CSS-بخش سوم

سلکتور ها در CSS

سلکتور ها در CSS – بخش سوم، شبه کلاس ها و شبه عناصر در CSS

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

شبه کلاس ها در CSS

سلکتور ها در CSS

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

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

در حال حاضر قصد نداریم که به همه ی شبه کلاس ها بپردازیم. مطمئنا هر کدام از این موارد را بعدا در صورت لزوم خواهید یافت. در این جا فقط سعی می شود خلاصه ای از بحث شبه انتخاب گر ها را گفته شود.

مثالی از شبه کلاس ها در CSS

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

سپس بخشی از دستورات CSS:

اکنون اجازه دهید با لینکی که به تازگی استایل کرده ایم ادامه دهیم.

یادگیری فعال: فهرست اطلاعات zebra striped /  A zebra striped info list

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

  1. شما قبلا دیده اید که چگونه باید شبه کلاس دوم را برای سبک های شناور بنویسید.
  2. برای striping zebra، شما باید از یک شبه کلاس مانند: nth-of-type استفاده کنید. این کار، به قوانین دو رنگ، یک نسخه نسبتا متفاوتی از شبه کلاس را می دهد تا عناصر لیست که به صورت زوج و فرد لیست شده اند را استایل کند. راهی پیدا کنید که ببینید چگونه می توانید این کار را انجام دهید.

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

شبه عناصر در CSS

شبه عناصر بسیار شبیه به شبه کلاس ها هستند، اما هنوز هم تفاوت هایی دارند. آن ها کلید واژه هایی هستند، که پیش از آن ها، دو کولون (::) قرار می گیرد و می تواند به انتهای selector ها اضافه شود تا بخش خاصی از عنصر را انتخاب کند. این شرایط خاص می تواند با یکی از حالت های زیر بدست آید:

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

مثالی از یک شبه عنصر در CSS

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

بیایید این دستور CSS را نیز اضافه کنیم:

در انتها، این نتیجه را دریافت می کنیم:

سلکتور ها در CSS

یادگیری فعال: استایل کردن یک پاراگراف در CSS

در این مرحله، در یادگیری فعال، ما یک پاراگراف داریم که می خواهیم آن را استایل کنیم! همه ی چیزی که باید در اینجا انجام دهید این است که دو مجموعه از دستور ها را به اولین خط و اولین حرف از پاراگراف اعمال کنید، این کار را با استفاده از شبه عنصر های: ::first-line  و ::first-letter انجام دهید. با انجام این کار، باید خط اول پاراگراف را به صورت بولد و اولین حرف از پاراگراف به صورت بزرگ و متمایز، در آید. و یک سبک قدیمی به آن می دهد.

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

آموزش تک
نویسندهآموزش تک

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