شبه طبقات

پادکست CSS - 015: شبه کلاس ها

فرض کنید یک فرم ثبت نام ایمیل دارید، و می خواهید قسمت فرم ایمیل اگر حاوی آدرس ایمیل نامعتبر باشد، حاشیه قرمز داشته باشد. چطوری این کار را انجام میدهی؟ شما می توانید از یک شبه کلاس :invalid CSS استفاده کنید که یکی از بسیاری از کلاس های شبه ارائه شده توسط مرورگر است.

یک شبه کلاس به شما امکان می دهد سبک ها را بر اساس تغییرات حالت و عوامل خارجی اعمال کنید. این بدان معناست که طرح شما می تواند به ورودی کاربر مانند آدرس ایمیل نامعتبر واکنش نشان دهد. این موارد در ماژول انتخابگرها پوشش داده شده است و این ماژول شما را با جزئیات بیشتری از آنها مطلع می کند.

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

حالت های تعاملی

شبه کلاس های زیر به دلیل تعاملی که کاربر با صفحه شما دارد اعمال می شود.

:hover

پشتیبانی مرورگر

• 1
• 12
• 1
• 2

منبع

اگر کاربر یک دستگاه اشاره‌گر مانند ماوس یا ترک‌پد دارد و آن را روی یک عنصر قرار می‌دهد، می‌توانید با :hover به آن حالت متصل شوید تا استایل‌ها را اعمال کنید. این یک راه مفید برای اشاره به این است که یک عنصر می تواند با آن تعامل داشته باشد.

:active

پشتیبانی مرورگر

• 1
• 12
• 1
• 1

منبع

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

:focus ، :focus-within و :focus-visible

پشتیبانی مرورگر

• 1
• 12
• 1
• 1

منبع

اگر یک عنصر می تواند فوکوس را دریافت کند - مانند یک <button> - می توانید به آن حالت با شبه کلاس :focus واکنش نشان دهید.

همچنین اگر عنصر فرزند عنصر شما فوکوس را با :focus-within دریافت کند، می‌توانید واکنش نشان دهید.

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

button:focus {
    outline: none;
}

این CSS حلقه فوکوس پیش‌فرض مرورگر را هنگامی که یک عنصر فوکوس دریافت می‌کند، حذف می‌کند، که برای کاربرانی که یک صفحه وب را با صفحه‌کلید پیمایش می‌کنند، مشکل دسترسی ایجاد می‌کند. اگر سبک فوکوس وجود نداشته باشد، هنگام استفاده از کلید تب ، نمی‌توانند مکان تمرکز فعلی را پیگیری کنند. با :focus-visible می‌توانید هنگامی که یک عنصر فوکوس را از طریق صفحه‌کلید دریافت می‌کند، یک سبک فوکوس ارائه دهید، در حالی که از outline: none برای جلوگیری از آن در هنگام تعامل دستگاه اشاره‌گر با آن.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

پشتیبانی مرورگر

• 1
• 12
• 1
• 1.3

منبع

شبه کلاس :target عنصری را انتخاب می کند که دارای id منطبق با یک قطعه URL باشد. فرض کنید HTML زیر را دارید:

<article id="content">
    …
</article>

زمانی که url حاوی #content باشد، می‌توانید استایل‌ها را به آن عنصر متصل کنید.

#content:target {
    background: yellow;
}

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

ایالت های تاریخی

:link

پشتیبانی مرورگر

• 1
• 12
• 1
• 1

منبع

شبه کلاس :link می توان برای هر عنصر <a> که دارای مقدار href است که هنوز بازدید نشده است اعمال شود.

:visited

می‌توانید پیوندی را که قبلاً توسط کاربر بازدید شده است، با استفاده از شبه کلاس :visited استایل دهید. این حالت مخالف :link است، اما ویژگی های CSS کمتری برای استفاده به دلایل امنیتی دارید. شما فقط می‌توانید color ، background-color ، border-color ، outline-color و رنگ fill SVG و stroke را استایل دهید.

سفارش مهم است

اگر یک سبک :visited تعریف کنید، می‌توان آن را با یک شبه کلاس پیوند با حداقل ویژگی یکسان لغو کرد. به همین دلیل، توصیه می شود از قانون LVHA برای استایل دادن به پیوندها با کلاس های کاذب به ترتیب خاصی استفاده کنید: :link , :visited , :hover , :active .

a:link {}
a:visited {}
a:hover {}
a:active {}

توجه: به دلایل امنیتی، فقط می‌توانید سبک‌های تعریف‌شده توسط یک :link یا حالت بازدید نشده را با شبه کلاس :visited تغییر دهید، بنابراین مطمئن شوید که ابتدا سبک‌های قابل تغییر را تعریف کرده‌اید. پایبندی به قانون LVHA به این امر کمک می کند.

حالت ها را تشکیل دهید

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

:disabled و :enabled

پشتیبانی مرورگر

• 1
• 12
• 1
• 3.1

منبع

اگر یک عنصر فرم، مانند یک <button> توسط مرورگر غیرفعال شده است، می توانید با شبه کلاس :disabled به آن حالت متصل شوید. شبه کلاس :enabled برای حالت مخالف در دسترس است، اگرچه عناصر فرم نیز به طور پیش‌فرض :enabled هستند، بنابراین ممکن است نتوانید به این کلاس شبه دست پیدا کنید.

:checked و :indeterminate

پشتیبانی مرورگر

• 1
• 12
• 1
• 3.1

منبع

کلاس شبه :checked زمانی در دسترس است که یک عنصر فرم پشتیبانی کننده، مانند یک چک باکس یا دکمه رادیویی در حالت علامت گذاری شده باشد.

وضعیت :checked یک حالت باینری (درست یا نادرست) است، اما چک باکس‌ها زمانی که علامت زده یا بدون علامت نیستند، حالتی بین دارند. به این حالت :indeterminate می گویند.

یک مثال از این حالت زمانی است که شما یک کنترل "انتخاب همه" دارید که تمام چک باکس های یک گروه را بررسی می کند. اگر کاربر بخواهد علامت یکی از این چک باکس ها را بردارید، چک باکس ریشه دیگر نشان دهنده علامت زدن "همه" نخواهد بود، بنابراین باید در حالت نامشخص قرار گیرد.

عنصر <progress> نیز حالت نامشخصی دارد که می توان به آن استایل داد. یک مورد استفاده رایج این است که به آن یک ظاهر راه راه بدهید تا مشخص شود که چقدر بیشتر مورد نیاز است.

:placeholder-shown

پشتیبانی مرورگر

• 47
• 79
• 51
• 9

منبع

اگر یک فیلد فرم دارای ویژگی placeholder و بدون مقدار باشد، شبه کلاس :placeholder-shown می توان برای پیوست کردن سبک ها به آن حالت استفاده کرد. به محض اینکه محتوایی در فیلد وجود داشته باشد، خواه placeholder داشته باشد یا نداشته باشد، این حالت دیگر اعمال نخواهد شد.

حالات اعتبارسنجی

پشتیبانی مرورگر

• 10
• 12
• 4
• 5

منبع

شما می توانید به اعتبار سنجی فرم HTML با کلاس های شبه مانند :valid ، :invalid و :in-range پاسخ دهید. شبه کلاس‌های :valid و :invalid برای زمینه‌هایی مانند فیلد ایمیلی که دارای pattern است که باید مطابقت داشته باشد، مفید است تا یک فیلد معتبر باشد. این وضعیت ارزش معتبر را می توان به کاربر نشان داد و به او کمک می کند بفهمد که می تواند با خیال راحت به فیلد بعدی منتقل شود.

شبه کلاس :in-range در صورتی در دسترس است که ورودی دارای min و max باشد، مانند ورودی عددی و مقدار در آن محدوده باشد.

با فرم‌های HTML، می‌توانید تعیین کنید که فیلدی با ویژگی required نیاز است. شبه کلاس :required برای فیلدهای الزامی در دسترس خواهد بود. فیلدهایی که مورد نیاز نیستند را می توان با شبه کلاس :optional انتخاب کرد.

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

انتخاب عناصر بر اساس شاخص، ترتیب و وقوع آنها

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

:first-child و :last-child

پشتیبانی مرورگر

• 4
• 12
• 3
• 3.1

منبع

اگر می خواهید اولین یا آخرین مورد را پیدا کنید، می توانید از :first-child و :last-child استفاده کنید. این شبه کلاس‌ها اولین یا آخرین عنصر را در گروهی از عناصر برادر برمی‌گردانند.

:only-child

پشتیبانی مرورگر

• 2
• 12
• 1.5
• 3.1

منبع

همچنین می توانید عناصری را انتخاب کنید که خواهر و برادری ندارند، با شبه کلاس :only-child .

:first-of-type و :last-of-type

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

شما می توانید :first-of-type و :last-of-type انتخاب کنید که در ابتدا، به نظر می رسد که آنها همان کار را با :first-child و :last-child انجام می دهند، اما این HTML را در نظر بگیرید:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

و این CSS:

.my-parent div:first-child {
    color: red;
}

هیچ عنصری قرمز رنگ نمی شود زیرا فرزند اول یک پاراگراف است و نه div. شبه کلاس :first-of-type در این زمینه مفید است.

.my-parent div:first-of-type {
    color: red;
}

با وجود اینکه <div> اول فرزند دوم است، هنوز از نوع اول در عنصر .my-parent است، بنابراین با این قانون، رنگ قرمز خواهد داشت.

:nth-child و :nth-of-type

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

شما به فرزندان اول و آخر و نوع هم محدود نیستید. شبه کلاس‌های :nth-child و :nth-of-type به شما امکان می‌دهند عنصری را مشخص کنید که در یک شاخص خاص قرار دارد. نمایه سازی در انتخابگرهای CSS از 1 شروع می شود.

شما می توانید بیش از یک شاخص را نیز به این شبه کلاس ها منتقل کنید. اگر می‌خواهید همه عناصر زوج را انتخاب کنید، می‌توانید از :nth-child(even) استفاده کنید.

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

li:nth-child(3n+3) {
    background: yellow;
}

این انتخابگر هر سومین مورد را انتخاب می‌کند که از آیتم 3n شروع می‌شود. n در این عبارت شاخص است، که از صفر شروع می‌شود.

فرض کنید 7 مورد <li> دارید. اولین موردی که انتخاب می شود 3 است زیرا 3n+3 به (3 * 0) + 3 ترجمه می شود. تکرار بعدی مورد 6 را انتخاب می کند زیرا n اکنون به 1 افزایش یافته است، بنابراین (3 * 1) + 3) . این عبارت برای هر دو :nth-child و :nth-of-type کار می کند.

می توانید با این نوع انتخابگر در این تستر فرزند n یا این ابزار انتخاب کمیت بازی کنید.

:only-of-type

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

در نهایت، می‌توانید تنها عنصر یک نوع خاص را در گروهی از خواهر و برادر با :only-of-type پیدا کنید. اگر می‌خواهید لیست‌هایی را فقط با یک مورد انتخاب کنید، یا اگر می‌خواهید تنها عنصر پررنگ را در یک پاراگراف پیدا کنید، این کار مفید است.

یافتن عناصر خالی

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

:empty

پشتیبانی مرورگر

• 1
• 12
• 1
• 3.1

منبع

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

<div>
</div>

دلیل این است که مقداری فضای خالی بین باز و بسته شدن <div> وجود دارد، بنابراین خالی کار نخواهد کرد.

اگر کنترل کمی روی HTML داشته باشید و بخواهید عناصر خالی مانند ویرایشگر محتوای WYSIWYG را پنهان کنید، شبه کلاس : :empty می تواند مفید باشد. در اینجا، یک ویرایشگر یک پاراگراف سرگردان و خالی اضافه کرده است.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

با :empty می توانید آن را پیدا کرده و پنهان کنید.

.post :empty {
    display: none;
}

یافتن و حذف عناصر متعدد

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

:is()

پشتیبانی مرورگر

• 88
• 88
• 78
• 14

منبع

اگر می‌خواهید همه عناصر h2 ، li و img فرزند را در یک عنصر .post پیدا کنید، ممکن است فکر کنید یک لیست انتخابگر مانند این بنویسید:

.post h2,
.post li,
.post img {
    …
}

با شبه کلاس :is() می توانید نسخه فشرده تری بنویسید:

.post :is(h2, li, img) {
    …
}

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

:not()

پشتیبانی مرورگر

• 1
• 12
• 1
• 3.1

منبع

همچنین می توانید آیتم ها را با شبه کلاس :not() حذف کنید. به عنوان مثال، می توانید از آن برای استایل دادن به تمام پیوندهایی که ویژگی class ندارند استفاده کنید.

a:not([class]) {
    color: blue;
}

پاسخ :not شبه کلاس نیز می تواند به شما در بهبود دسترسی کمک کند. به عنوان مثال، یک <img> باید یک alt داشته باشد، حتی اگر یک مقدار خالی باشد، بنابراین می‌توانید یک قانون CSS بنویسید که یک طرح کلی قرمز رنگ به تصاویر نامعتبر اضافه می‌کند:

img:not([alt]) {
    outline: 10px red;
}

درک خود را بررسی کنید

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

شبه کلاس ها به گونه ای عمل می کنند که گویی یک کلاس به صورت پویا روی یک عنصر اعمال شده است، در حالی که شبه عناصر روی خود یک عنصر عمل می کنند.

درست است، واقعی

مراقب استفاده از یک یا دو : به عنوان یک کاراکتر متمایز کلیدی در انتخابگر باشید

نادرست

عناصر شبه برای قطعات، شبه کلاس ها برای حالت هستند.

کدام یک از موارد زیر یک شبه کلاس کاربردی هستند؟

:is()

🎉

:target

شبه کلاس های تابعی دارای () پس از خود هستند تا نشان دهند که پارامترها را می پذیرند.

:empty

شبه کلاس های تابعی دارای () پس از خود هستند تا نشان دهند که پارامترها را می پذیرند.

:not()

🎉

کدام یک از شبه کلاس های زیر به دلیل تعامل کاربر است؟

:hover

🎉

:press

دوباره امتحان کنید!

:squeeze

دوباره امتحان کنید!

:target

🎉

:focus-within

🎉

کدام یک از موارد زیر کلاس های شبه حالت <form> هستند؟

:enabled

🎉

:fresh

دوباره امتحان کنید!

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

دوباره امتحان کنید!

:valid

🎉