شبه طبقات

پادکست 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;
}

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

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