Belajar CSS @scope

tmp7
Feb 14

@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
    ]
  ]
  
]
Older posts

Komentar