پادکست CSS - 015: شبه کلاس ها
فرض کنید یک فرم ثبت نام ایمیل دارید، و می خواهید قسمت فرم ایمیل اگر حاوی آدرس ایمیل نامعتبر باشد، حاشیه قرمز داشته باشد. چگونه این کار را انجام می دهید؟ شما می توانید از یک شبه کلاس :invalid
CSS استفاده کنید که یکی از بسیاری از کلاس های شبه ارائه شده توسط مرورگر است.
یک شبه کلاس به شما امکان می دهد سبک ها را بر اساس تغییرات حالت و عوامل خارجی اعمال کنید. این بدان معناست که طرح شما می تواند به ورودی کاربر مانند آدرس ایمیل نامعتبر واکنش نشان دهد. این موارد در ماژول انتخابگرها پوشش داده شده است و این ماژول شما را با جزئیات بیشتری از آنها مطلع می کند.
برخلاف شبه عناصر، که میتوانید در ماژول قبلی بیشتر درباره آنها بیاموزید، کلاسهای شبه به حالتهای خاصی که یک عنصر ممکن است در آن قرار داشته باشد، متصل میشوند، نه به طور کلی بخشهایی از سبک آن عنصر.
حالت های تعاملی
شبه کلاس های زیر به دلیل تعاملی که کاربر با صفحه شما دارد اعمال می شود.
:hover
اگر کاربر یک دستگاه اشارهگر مانند ماوس یا ترکپد دارد و آن را روی یک عنصر قرار میدهد، میتوانید با :hover
به آن حالت متصل شوید تا استایلها را اعمال کنید. این یک راه مفید برای اشاره به این است که یک عنصر می تواند با آن تعامل داشته باشد.
:active
این حالت زمانی ایجاد می شود که یک عنصر به طور فعال با آن تعامل داشته باشد - مانند یک کلیک - قبل از اینکه کلیک آزاد شود. اگر از یک دستگاه اشاره گر مانند ماوس استفاده می شود، این حالت زمانی است که کلیک شروع می شود و هنوز رها نشده است.
:focus
، :focus-within
و :focus-visible
اگر یک عنصر می تواند فوکوس را دریافت کند - مانند یک <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
شبه کلاس :target
عنصری را انتخاب می کند که دارای id
منطبق با یک قطعه URL باشد. فرض کنید HTML زیر را دارید:
<article id="content">
…
</article>
زمانی که url حاوی #content
باشد، میتوانید استایلها را به آن عنصر متصل کنید.
#content:target {
background: yellow;
}
این برای برجسته کردن مناطقی که ممکن است به طور خاص به آنها پیوند داده شده باشد، مانند محتوای اصلی یک وب سایت، از طریق یک پیوند پرش مفید است.
ایالت های تاریخی
:link
شبه کلاس :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 {}
حالت ها را تشکیل دهند
شبه کلاسهای زیر میتوانند عناصر فرم را در حالتهای مختلفی که این عناصر ممکن است در هنگام تعامل با آنها داشته باشند، انتخاب کنند.
:disabled
و :enabled
اگر یک عنصر فرم، مانند یک <button>
توسط مرورگر غیرفعال شده است، می توانید با شبه کلاس :disabled
به آن حالت متصل شوید. شبه کلاس :enabled
برای حالت مخالف در دسترس است، اگرچه عناصر فرم نیز به طور پیشفرض :enabled
هستند، بنابراین ممکن است نتوانید به این کلاس شبه دست پیدا کنید.
:checked
و :indeterminate
کلاس شبه :checked
زمانی در دسترس است که یک عنصر فرم پشتیبانی کننده، مانند یک چک باکس یا دکمه رادیویی در حالت علامت گذاری شده باشد.
وضعیت :checked
یک حالت باینری (درست یا نادرست) است، اما چک باکسها زمانی که علامت زده یا بدون علامت نیستند، حالتی بین دارند. به این حالت :indeterminate
می گویند.
یک مثال از این حالت زمانی است که شما یک کنترل "انتخاب همه" دارید که تمام چک باکس های یک گروه را بررسی می کند. اگر کاربر بخواهد علامت یکی از این چک باکس ها را بردارید، چک باکس ریشه دیگر نشان دهنده علامت "همه" نخواهد بود، بنابراین باید در حالت نامشخص قرار گیرد.
عنصر <progress>
نیز حالت نامشخصی دارد که می توان به آن استایل داد. یک مورد استفاده رایج این است که به آن یک ظاهر راه راه بدهید تا مشخص شود که چقدر بیشتر مورد نیاز است.
:placeholder-shown
اگر یک فیلد فرم دارای ویژگی placeholder
و بدون مقدار باشد ، شبه کلاس :placeholder-shown
می توان برای پیوست کردن سبک ها به آن حالت استفاده کرد. به محض اینکه محتوایی در فیلد وجود داشته باشد، خواه placeholder
داشته باشد یا نداشته باشد، این حالت دیگر اعمال نخواهد شد.
حالات اعتبارسنجی
شما می توانید به اعتبار سنجی فرم HTML با کلاس های شبه مانند :valid
، :invalid
و :in-range
پاسخ دهید. شبه کلاسهای :valid
و :invalid
برای زمینههایی مانند فیلد ایمیلی که دارای pattern
است که باید مطابقت داشته باشد، مفید است تا یک فیلد معتبر باشد. این وضعیت ارزش معتبر را می توان به کاربر نشان داد و به او کمک می کند بفهمد که می تواند با خیال راحت به فیلد بعدی منتقل شود.
شبه کلاس :in-range
در صورتی در دسترس است که ورودی دارای min
و max
باشد، مانند ورودی عددی و مقدار در آن محدوده باشد.
با فرمهای HTML، میتوانید تعیین کنید که فیلدی با ویژگی required
است. شبه کلاس :required
برای فیلدهای الزامی در دسترس خواهد بود. فیلدهایی که مورد نیاز نیستند را می توان با شبه کلاس :optional
انتخاب کرد.
انتخاب عناصر بر اساس شاخص، ترتیب و وقوع آنها
گروهی از شبه کلاس ها وجود دارند که آیتم ها را بر اساس جایی که در سند هستند انتخاب می کنند.
:first-child
و :last-child
اگر می خواهید اولین یا آخرین مورد را پیدا کنید، می توانید از :first-child
و :last-child
استفاده کنید. این شبه کلاس ها یا اولین یا آخرین عنصر را در گروهی از عناصر برادر برمی گرداند.
:only-child
همچنین می توانید عناصری را انتخاب کنید که خواهر و برادری ندارند، با شبه کلاس :only-child
.
:first-of-type
و :last-of-type
می توانید :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
شما به فرزندان اول و آخر و نوع هم محدود نیستید. شبه کلاسهای :nth-child
و :nth-of-type
به شما امکان میدهند عنصری را مشخص کنید که در یک شاخص خاص قرار دارد. نمایه سازی در انتخابگرهای CSS از 1 شروع می شود.
شما می توانید بیش از یک شاخص را نیز به این شبه کلاس ها منتقل کنید. اگر میخواهید همه عناصر زوج را انتخاب کنید، میتوانید از :nth-child(even)
استفاده کنید.
همچنین میتوانید انتخابگرهای پیچیدهتری ایجاد کنید که آیتمها را در فواصل زمانی منظم با استفاده از ریز نحوی An+B پیدا کنند.
li:nth-child(3n+3) {
background: yellow;
}
این انتخابگر هر آیتم سوم را انتخاب میکند که از آیتم 3 شروع 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
در نهایت، میتوانید تنها عنصر یک نوع خاص را در گروهی از خواهر و برادر با :only-of-type
پیدا کنید. اگر میخواهید لیستهایی را فقط با یک مورد انتخاب کنید، یا اگر میخواهید تنها عنصر پررنگ را در یک پاراگراف پیدا کنید، این کار مفید است.
یافتن عناصر خالی
گاهی اوقات شناسایی عناصر کاملاً خالی می تواند مفید باشد، و یک کلاس شبه برای آن نیز وجود دارد.
:empty
اگر عنصری فرزند نداشته باشد، شبه کلاس :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()
اگر میخواهید همه عناصر h2
، li
و img
فرزند را در یک عنصر .post
پیدا کنید، ممکن است فکر کنید یک لیست انتخابگر مانند این بنویسید:
.post h2,
.post li,
.post img {
…
}
با شبه کلاس :is()
می توانید نسخه فشرده تری بنویسید:
.post :is(h2, li, img) {
…
}
شبه کلاس :is
نه تنها فشرده تر از یک لیست انتخابگر است، بلکه بخشنده تر است. در بیشتر موارد، اگر خطا یا انتخابگر پشتیبانی نشده در لیست انتخابگر وجود داشته باشد، کل لیست انتخابگر دیگر کار نخواهد کرد. اگر در انتخابگرهای پاس شده در یک کلاس شبه :is
خطایی وجود داشته باشد، انتخابگر نامعتبر را نادیده می گیرد، اما از آنهایی استفاده می کند که معتبر هستند.
:not()
همچنین می توانید آیتم ها را با شبه کلاس :not()
حذف کنید. به عنوان مثال، می توانید از آن برای استایل دادن به تمام پیوندهایی که ویژگی class
ندارند استفاده کنید.
a:not([class]) {
color: blue;
}
پاسخ :not
شبه کلاس نیز می تواند به شما در بهبود دسترسی کمک کند. به عنوان مثال، یک <img>
باید یک alt
داشته باشد، حتی اگر یک مقدار خالی باشد، بنابراین می توانید یک قانون CSS بنویسید که یک طرح کلی قرمز رنگ به تصاویر نامعتبر اضافه می کند:
img:not([alt]) {
outline: 10px red;
}
درک خود را بررسی کنید
دانش خود را از کلاس های شبه تست کنید
شبه کلاس ها به گونه ای عمل می کنند که گویی یک کلاس به صورت پویا روی یک عنصر اعمال شده است، در حالی که شبه عناصر روی خود یک عنصر عمل می کنند.
کدام یک از موارد زیر یک شبه کلاس کاربردی هستند؟
:target
:empty
:is()
:not()
کدام یک از شبه کلاس های زیر به دلیل تعامل کاربر است؟
:target
:press
:squeeze
:focus-within
:hover
کدام یک از موارد زیر کلاس های شبه حالت <form>
هستند؟
:loading
:indeterminate
:checked
:fresh
:in-range
:enabled
:valid