شبه طبقات

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

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

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

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

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

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

:hover

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 2.

Source

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

:active

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 1.

Source

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

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

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 1.

Source

اگر یک عنصر می تواند فوکوس را دریافت کند - مانند یک <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

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 1.3.

Source

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

<article id="content">
    <!-- ... -->
</article>

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

#content:target {
    background: yellow;
}

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

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

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 1.

Source

شبه کلاس :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

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 3.1.

Source

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

:checked و :indeterminate

Browser Support

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.
  • سافاری: 3.1.

Source

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

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

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

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

:placeholder-shown

Browser Support

  • کروم: 47.
  • لبه: 79.
  • فایرفاکس: 51.
  • سافاری: 9.

Source

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

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

Browser Support

  • کروم: 10.
  • لبه: 12.
  • فایرفاکس: 4.
  • سافاری: 5.