:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
قبلا به این شکل انجام میدادیم
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
خب دوستان توی css دو تا روش جدید معرفی شده که میتونید باشون چندتا المنت رو انتخاب کنید اون توابع
()where: و ()is: هستن- با این توابع می‌تونیم به صورت گروهی و یکجا چندین المنت رو انتخاب کنیم. کاری که قبلاً امکان‌پذیر نبود و باید المنت‌ها رو تک تک انتخاب می‌کردیم
- این ۲ تابع کارایی مشابهی دارن. اما باید بدونیم که المنت‌هایی که با where انتخاب می‌کنیم، پایین‌ترین میزان Specificity رو دارن. اما Specificity توی is بستگی به المنت‌هایی داره که انتخاب می‌کنیم
- این دو تابع نسبتاً جدید هستن و بنابراین پشتیبانی مرورگرها اهمیت داره:
https://developer.mozilla.org/en-US/docs/Web/CSS/:where
اینکه حالا Specificity چیه رو خدمتون در پست های بعدی میگم
#css
ID Channel : @htmlcss_channel
MDN Web Docs
:where() - CSS | MDN
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
This media is not supported in your browser
VIEW IN TELEGRAM
<< انعکاس تصاویر با استفاده از ویژگی CSS Box-Reflect >>
⚡️ به شما امکان می دهد محتویات یک عنصر را در یک جهت خاص (بالا، پایین، راست، چپ) منعکس کنید .
💥 پارامتر دوم مسئول آفست است. و جالب‌تر این است که می‌توانیم با استفاده از پارامتر سوم، یک گرادیان را به عنوان افکت محو اضافه کنیم .
#css
⚡️ به شما امکان می دهد محتویات یک عنصر را در یک جهت خاص (بالا، پایین، راست، چپ) منعکس کنید .
💥 پارامتر دوم مسئول آفست است. و جالب‌تر این است که می‌توانیم با استفاده از پارامتر سوم، یک گرادیان را به عنوان افکت محو اضافه کنیم .
-webkit-box-reflect: below 0px offset linear-gradient(180deg , rgba(#fff, 0 ) 0% , rgba(#fff, 0 ) 100% );#css