@scope ini terbilang baru, jadi tidak ada bentuk lamanya, alias harus menunggu update dari browser untuk support @scope.
Contoh pemakaiannya sebagai berikut:
css |
---|
.widget-Post { @scope (&) to (.sub-widget) { .inner { background: yellow; } } } |
Di contoh di atas, styling untuk .inner akan dibatasi untuk yang ada di dalam .widget-post, tapi tidak di dalam .sub-widget.
Misalnya, di bawah ini ada 2 elemen widget: .widget-post dan .widget-comment. Dua-duanya punya element .inner, tapi hanya .inner dengan id #top yang akan berwarna kuning.
html |
---|
[ .widget-Post [ .inner id="top" [ .title Post title ] ] [ .widget-Comment .sub-widget [ .inner id="bottom" First comment ] ] ] |
Komentar
Posting Komentar