:root Pseudo-class
شبه کلاس root:
در CSS به شما این اجازه را می دهد که بالاترین سطح عنصر DOM را در ساختار html
را هدف قرار دهید.
شاید به هنگام کار با شبه کلاس root:
اینطور به نظر برسد که تفاوتی میان این سودو کلاس و انتخابگر html
در CSS وجود نداشته باشد. اما از آنجایی که زبان استایل دهی CSS در دیگر قالبها از جمله XML و SVG نیز کاربرد دارد، لذا در این موارد، شبه کلاس root:
به عنصر دیگری اشاره خواهد کرد. صرف نظر از قالب سندی (document) که استفاده می شود، root:
به بالاترین عنصر در ساختار درختی عناصر اشاره خواهد کرد.
در مثال زیر شبه کلاس root:
برای هدف قرار دادن رنگ پیش زمینه <body>
استفاده شده است. در این مورد استفاده از انتخابگر html
تاثیر مشابهی خواهد داشت:
html
<p>این مثالی از کاربرد سودو کلاس root: می باشد.</p>
css
:root { background-color: tomato; padding: 3em; } body { background-color: white; padding: 1.5em; direction: rtl; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.