root: یک pseudo-class می باشد که برای انتخاب عنصر ریشه (root) سند HTML استفاده می شود.
عنصر ریشه عنصری است که فرزند عنصر دیگری نباشد. در HTML4 این عنصر <html> می باشد که در بالاترین سطح اجدادی قرار دارد!
انتخابگر root: معادل انتخابگر html است با این تفاوت که سطح تشخیص (specificity) بالاتری دارد.
این به این معنی است که خطوط استایلی که برای root: نوشته می شوند بر روی خطوط استایل انتخابگر html بازنویسی (override) می شوند, حتی اگر انتخابگر html مانند مثال زیر بعد از انتخابگر root: بیاید.
:root {
background-color: red;
}
html {
background-color: green;
}
در این مثال عنصر ریشه پس زمینه ای به رنگ قرمز به خود می گیرد این در حالی است که انتظار می رود به رنگ سبز در بیاید چون استایل رنگ سبز بعد از قرمز نوشته شده است ولی همانطور که گفته شد انتخابگر root: سطح تشخیص بالاتری دارد.
در اسناد دیگر مثل XML و یا SVG انتخابگر root: می تواند به عنصر دیگری در سطح اجدادی بالاتر اشاره کند.
مثل دیگر pseudo-classها این انتخابگر هم می تواند به صورت زنجیره ای با برخی از انتخابگر های دیگر مثل hover: استفاده شود:
:root {
background-color: #009966;
transition: background-color .6s;
}
:root:hover {
background-color: #0099ff
}
دمویی در زیر برای بررسی دقیق تر آماده شده است.
نکته جالبی که در این دمو باید توجه شود این است که از آنجایی که عنصر مجازی after:: به عنصر <html> اضافه شده است استایل های پایه مثل فونت را از عنصر <body> ارث نمی برد.
See the Pen :root by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
root: در مرورگرهای کروم, فایرفاکس, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.
سوال داری؟ برو به پنل پرسش و پاسخ