فرادرسانواع شبه کلاس در CSS — راهنمای کاربردی
سلکتورها و شبه سلکتورهای CSS به ما امکان می‌دهند که استایل‌ها را به عناصر مختلف نسبت دهیم. این عناصر در واقع کلاس‌های شبح‌وار هستند که از روی حالت خاص عناصر یا الگوهای markup درون سند و یا حتی حالت خود سند استنباط می‌شوند. در این مقاله تلاش می‌کنیم با کسب آشنایی با انواع شبه کلاس در CSS از کدهای CSS بیشتر و از کدهای جاوا اسکریپت کمتر در پروژه‌های خود استفاده کنیم. نکته مهم دیگر این است که به این ترتیب از رویه‌های مناسبی بهره گرفته و امکان استفاده مجدد از کد را نیز به دست می‌آوریم.
برای استفاده مجدد از کامپوننت‌های UI بهتر است از هاب‌های سرویس ابری کامپوننت مانند Bit.dev (+) استفاده کنیم. از این هاب می‌توان برای انتشار، مستند‌سازی و سازمان‌دهی همه کامپوننت‌های با قابلیت استفاده مجدد UI در تیم برنامهنویسی کمک گرفت. این هاب نه‌تنها روشی برای ساخت سریع‌تر UI بلکه یک روش برای ساخت بهتر این کامپوننت‌ها محسوب می‌شود، چون ما را تشویق به استانداردسازی و ماژولار‌سازی کد می‌کند.
first-line::
این شبه کلاس خط نخست متن را تا قبل از نخستین line break انتخاب می‌کند.
1p:first-line {
2 color: lightcoral;
3}first-letter::
این شبه سلکتور روی حرف نخست متن در یک عنصر تأثیر می‌گذارد.
1.innerDiv p:first-letter {
2 color: lightcoral;
3 font-size: 40px
4}selection::
این شبه سلکتور روی هر ناحیه‌ای که از سوی کاربر هایلایت شده باشد، تأثیر می‌گذارد.
با استفاده از شبه سلکتور ::selection، می‌توانیم استایل‌بندی خود را صرفاً روی ناحیه‌ای که کاربر انتخاب کرده است، متمرکز کنیم.
1div::selection {
2 background: yellow;
3}root:
شبه کلاس :root عنصر ریشه سند را انتخاب می‌کند. در HTML این عنصر همواره خود عنصر HTML است. در RSS این عنصر ریشه همان عنصر RSS است. این شبکه سلکتور به طور عمده برای ذخیره‌سازی مقادیر قاعده سراسری با استفاده از متغیر CSS در زمان به‌کارگیری روی عنصر root مورد استفاده قرار می‌گیرد.
empty:
این شبه سلکتور هر عنصری که هیچ نوع فرزندی نداشته باشد را انتخاب می‌کند. این عنصر باید خالی باشد. یک عنصر زمانی خالی است که هیچ فضای سفید، محتوای قابل رؤیت و یا عنصر هم‌نیا نداشته باشد.
1div:empty {
2 border: 2px solid orange;
3}
4<div></div>
5<div></div>
6<div>
7</div>این قاعده روی عناصر div خالی اعمال می‌شود. این قاعده روی div اول و دوم اعمال می‌شود، زیرا واقعاً خالی هستند، اما روی div سوم اعمال نمی‌شود، زیرا دارای کاراکتر whitespace است.
only-child:
این شبکه کلاس روی عنصری اعمال می‌شود که تنها فرزند عنصر والد خود باشد.
1.innerDiv p:only-child {
2 color: orangered;
3}first-of-type:
این شبه سلکتور نخستین عنصر فرزند با نوع خاص را انتخاب می‌کند:
1.innerDiv p:first-of-type {
2 color: orangered;
3}کد فوق روی نخستین فرزند .innerDiv مربوط به یک عنصر پاراگراف p اعمال می‌شود.
1<div class="innerDiv">
2 <div>Div1</div>
3 <p>These are the necessary steps</p>
4 <p>hiya</p>
5
6 <p>
7 Do <em>not</em> push the brake at the same time as the accelerator.
8 </p>
9 <div>Div2</div>
10</div>کد فوق پاراگراف "These are the necessary step" را انتخاب می‌کند.
last-of-type:
این مورد همانند شبه سلکتور قبلی است، اما این بار آخرین فرزند از نوع خاص را انتخاب می‌کند.
1.innerDiv p:last-of-type {
2 color: orangered;
3}کد فوق روی آخرین فرزند innerDiv عنصر از نوع پاراگراف p اعمال می‌شود.
1<div class="innerDiv">
2 <p>These are the necessary steps</p>
3 <p>hiya</p>
4 <div>Div1</div>
5 <p>
6 Do the same.
7 </p>
8 <div>Div2</div>
9</div>بدین ترتیب عنصر p به صورت ("Do the same") انتخاب می‌شود.
()nth-of-type:
این سلکتور یک عنصر از نوع خاص را از لیستی از عناصر والد تعیین‌شده انتخاب می‌کند:
1.innerDiv p:nth-of-type(1) {
2 color: orangered;
3}()nth-last-of-type:
این سلکتور آخرین عنصر فرزند از نوع خاص را انتخاب می‌کند:
1.innerDiv p:nth-last-of-type() {
2 color: orangered;
3}کد فوق آخرین عنصر را در لیست درون عنصر innerDiv و با نوع پاراگراف انتخاب می‌کند:
1<div class="innerDiv">
2 <p>These are the necessary steps</p>
3 <p>hiya</p>
4 <div>Div1</div>
5 <p>
6 Do the same.
7 </p>
8 <div>Div2</div>
9</div>عنصر P به صورت آخرین عنصر فرزند پاراگراف درون innerDiv است و از این رو انتخاب شده و تحت تأثیر قاعده CSS قرار می‌گیرد.
link:
این سلکتور روی لینک‌هایی که بازدید نشده‌اند، تأثیر می‌گذارد.
این سلکتور به طور عمده به همراه عنصر a با خصوصیت href مورد استفاده قرار می‌گیرد.
1a:link {
2 color: orangered;
3}
4<a href="/login">Login<a>کد فوق موجب می‌شود که عناصر a با خصوصیت href که کاربر در صفحه روی آن‌ها کلیک نکرده است یک متن با زنگ نارنجی پیدا کنند.
checked:
این سلکتور روی چک‌باکسی که تیک خورده باشد، اعمال می‌شود.
1input:checked {
2 border: 2px solid lightcoral;
3}این قاعده روی همه چک‌باکس‌هایی اعمال می‌شود که کاربر روی آن‌ها کلیک کرده تا تیک بزند.
valid:
این سلکتور به طور عمده در فرم‌ها برای نمایش بصری عناصری که مرحله اعتبارسنجی را با موفقیت پاس می‌کنند، استفاده می‌شود. زمانی که یک اعتبارسنجی موفق است، عنصر پیش‌فرض با خصوصیت valid تعیین می‌شود.
1input:valid {
2 boder-color: lightsalmon;
3}invalid:
این سلکتور شبیه مورد قبلی است، اما روی عناصری اعمال می‌شود که نتوانند تست اعتبارسنجی را پاس کنند.
1input[type="text"]:invalid {
2 border-color: red;
3}()lang:
این سلکتور روی عناصری اعمال می‌شود که زبان آن‌ها مشخص شده است. برای استفاده از آن دو روش وجود دارد که یکی به صورت زیر است:
1p:lang(fr) {
2 background: yellow;
3}روش دیگر نیز به صورت زیر است:
1p[lang|="fr"] {
2 background: yellow;
3}
4<p lang="fr">Paragraph 1</p>()not:
این شبه سلکتور منفی‌ساز هر چیزی که انتخاب شده باشد را برعکس می‌کند. به مثال زیر توجه کنید:
1.innerDiv :not(p) {
2 color: lightcoral;
3}
4<div class="innerDiv">
5 <p>Paragraph 1</p>
6 <p>Paragraph 2</p>
7 <div>Div 1</div>
8 <p>Paragraph 3</p>
9 <div>Div 2</div>
10</div>در کد فوق Div 1 و Div 2 انتخاب می‌شوند، زیرا عناصر p نیستند.
سخن پایانی
به این ترتیب به پایان این مقاله می‌رسیم. البته انواع شبه سلکتورها از این فهرست بیشتر است، اما انواعی که در زمان کدنویسی بیشتر به کار می‌آیند، در این راهنما معرفی شده‌اند.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- مجموعه آموزش‌های برنامهنویسی
- آموزش طراحی وب با CSS – مقدماتی
- ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
- ۱۰ نمونه کد ساده CSS که می‌توان در ۱۰ دقیقه آموخت
==
