سلکتور ها در CSS – بخش سوم، شبه کلاس ها و شبه عناصر در CSS
در بخش های قبلی مقاله ی سلکتور های CSS، به مفاهیم کلی سلکتور ها، پرداخته شد. سپس سلکتور های ساده معرفی گردید و در بخش دوم مقاله نیز، سلکتور های صفت ها، شرح داده شد. در سومین سری از مقالات در مورد نوع دیگری از انتخابگر ها، یعنی درباره ی شبه انتخاب گر ها صحبت می کنیم. این شبه انتخاب گر ها عناصر را انتخاب نمی کنند، بلکه بخش های خاصی از عناصر را انتخاب می کنند و یا عناصر را، تنها در برخی شرایط خاص انتخاب می کنند. شبه انتخاب گر ها به دو نوع اصلی تقسیم می شوند: شبه کلاس ها و شبه عناصر.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
شبه کلاس ها در CSS
شبه کلاس در CSS یک کلمه ی کلیدی است که به انتهای انتخاب گر اضافه می شود، و قبل از آن، یک کولون (:) قرار می گیرد و مشخص می کند که تنها زمانی که عنصر در یک حالت خاص است، عنصر انتخاب شده سبک می شود. به عنوان مثال، ممکن است بخواهید یک عنصر لینک را فقط زمانی که از طریق نشانگر ماوس شناور شده است، یا چک باکس را زمانی که غیرفعال یا چک شده است، استایل کنید. این شرایط خاص می تواند یکی از حالت های لیست شده در زیر باشد:
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
- :active
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :fullscreen
- :focus
- :focus-within
- :hover
- :indeterminate
- :in-range
- :invalid
- :lang
- :last-child
- :last-of-type
- :left
- :link
- :matches()
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :valid
- :visited
در حال حاضر قصد نداریم که به همه ی شبه کلاس ها بپردازیم. مطمئنا هر کدام از این موارد را بعدا در صورت لزوم خواهید یافت. در این جا فقط سعی می شود خلاصه ای از بحث شبه انتخاب گر ها را گفته شود.
مثالی از شبه کلاس ها در CSS
در حال حاضر، اجازه دهید فقط یک مثال ساده از استفاده ی آن ها را ببینیم. اول، بخشی از کد HTML:
|
1 |
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a> |
سپس بخشی از دستورات CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* These styles will style our link in all states */ a { color: blue; font-weight: bold; } /* We want visited links to be the same color as non visited links */ a:visited { color: blue; } /* We highlight the link when it is hovered over (mouse over), activated (mouse down) or focused (keyboard) */ a:hover, a:active, a:focus { color: darkred; text-decoration: none; } |
اکنون اجازه دهید با لینکی که به تازگی استایل کرده ایم ادامه دهیم.
یادگیری فعال: فهرست اطلاعات zebra striped / A zebra striped info list
در این قسمت دوباره نوبت شماست؛ در این بخش از یادگیری فعال، می خواهیم که شما بعضی از اطلاعات زبرا را به یک لیست از لینک های اطلاعات اضافه کنید و از کلاس های مناسب برای ایجاد پیوندها به صورت متفاوت استفاده کنید. در این تمرین فقط باید سه دستور اخیر را ویرایش کنید. برخی از نکات قابل توجه:
- شما قبلا دیده اید که چگونه باید شبه کلاس دوم را برای سبک های شناور بنویسید.
- برای striping zebra، شما باید از یک شبه کلاس مانند: nth-of-type استفاده کنید. این کار، به قوانین دو رنگ، یک نسخه نسبتا متفاوتی از شبه کلاس را می دهد تا عناصر لیست که به صورت زوج و فرد لیست شده اند را استایل کند. راهی پیدا کنید که ببینید چگونه می توانید این کار را انجام دهید.
اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه ی بازنشانی، آن را مجدد تنظیم کنید. اگر واقعا موفق به انجام این تمرین نشدید، دکمه نمایش راه حل را فشار دهید تا پاسخ تمرین را ببینید.
شبه عناصر در CSS
شبه عناصر بسیار شبیه به شبه کلاس ها هستند، اما هنوز هم تفاوت هایی دارند. آن ها کلید واژه هایی هستند، که پیش از آن ها، دو کولون (::) قرار می گیرد و می تواند به انتهای selector ها اضافه شود تا بخش خاصی از عنصر را انتخاب کند. این شرایط خاص می تواند با یکی از حالت های زیر بدست آید:
همه ی شبه عنصر ها، رفتار های بسیار خاص و ویژگی های جالبی دارند، اما در حال حاضر پرداختن به همه ی آن ها، خارج از محدوده ی این آموزش است. در این مقاله فقط سعی شده است تا معرفی خلاصه ای از سلکتور ها آورده شود تا مخاطب بتواند با کسب اطلاعات مختصر و مفیدی، کار با سلکتور های CSS را شروع کند. شاید در آینده، به مباحث بیشتر و جالب تری درباره ی سلکتور های CSS نیز بپردازیم.
مثالی از یک شبه عنصر در CSS
در اینجا فقط یک مثال ساده از CSS در مورد شبه عنصر ها را نشان می دهیم. در این مثال، کد نوشته شده، فضایی را دقیقا پس از تمام لینک ها، انتخاب می کند و یک فلش را در آن فضا اضافه می کند:
|
1 2 3 4 |
<ul> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li> </ul> |
بیایید این دستور CSS را نیز اضافه کنیم:
|
1 2 3 4 5 6 |
/* All elements with an attribute "href" with values starting with "http" will have an arrow added after their content (to indicate they are external links) */ [href^=http]::after { content: '⤴'; } |
در انتها، این نتیجه را دریافت می کنیم:
یادگیری فعال: استایل کردن یک پاراگراف در CSS
در این مرحله، در یادگیری فعال، ما یک پاراگراف داریم که می خواهیم آن را استایل کنیم! همه ی چیزی که باید در اینجا انجام دهید این است که دو مجموعه از دستور ها را به اولین خط و اولین حرف از پاراگراف اعمال کنید، این کار را با استفاده از شبه عنصر های: ::first-line و ::first-letter انجام دهید. با انجام این کار، باید خط اول پاراگراف را به صورت بولد و اولین حرف از پاراگراف به صورت بزرگ و متمایز، در آید. و یک سبک قدیمی به آن می دهد.
اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه ی بازنشانی، آن را مجدد تنظیم کنید. اگر واقعا موفق به انجام این تمرین نشدید، دکمه نمایش راه حل را فشار دهید تا پاسخ تمرین را ببینید.
