tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

nesting-basic.html (2401B)

      1 <!DOCTYPE html>
      2 <title>Basic nesting</title>
      3 <link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
      5 <link rel="match" href="nesting-basic-ref.html">
      6 <style>
      7  .test {
      8    background-color: red;
      9    width: 30px;
     10    height: 30px;
     11    display: grid;
     12  }
     13 
     14  .test-1 {
     15    & > div {
     16      background-color: green;
     17    }
     18  }
     19 
     20  .test-2 {
     21    & > div {
     22      background-color: green;
     23    }
     24  }
     25 
     26  .test-3 {
     27    & .test-3-child {
     28      background-color: green;
     29    }
     30  }
     31 
     32  span > b {
     33    .test-4 section & {
     34      display: inline-block;
     35      background-color: green;
     36      width: 100%;
     37      height: 100%;
     38    }
     39 
     40    .test-4 section > & {
     41      background-color: red;
     42    }
     43  }
     44 
     45  .test-6 {
     46    &.test {
     47      background-color: green;
     48    }
     49  }
     50 
     51  .test-7, .t7- {
     52    & + .test-7-child, &.t7-- {
     53      background-color: green;
     54    }
     55  }
     56 
     57  .test-8 {
     58    & {
     59      background-color: green;
     60    }
     61  }
     62 
     63  .test-9 {
     64    &:is(.t9-, &.t9--) {
     65      background-color: green;
     66    }
     67  }
     68 
     69  .test-10 {
     70    & {
     71      background-color: red;
     72    }
     73    background-color: green;
     74  }
     75 
     76  .test-11 {
     77    & {
     78      background-color: red;
     79    }
     80    background-color: green !important;
     81  }
     82 
     83  /* & at top level counts as :scope, i.e. the root element here */
     84  & .test-12 {
     85    background-color: green;
     86  }
     87  & > .test-12 {
     88    background-color: red !important;
     89  }
     90 
     91  .test-13::before {
     92    background-color: green;
     93    content: "";
     94  }
     95  .test-13::before {
     96    & {
     97      background-color: red;
     98    }
     99  }
    100  div.test-14 {
    101      div& {  background-color: green; }
    102  }
    103 
    104  body * + * {
    105    margin-top: 8px;
    106  }
    107 </style>
    108 <body>
    109  <p>Tests pass if <strong>block is green</strong></p>
    110  <div class="test test-1"><div></div></div>
    111  <div class="test test-2"><div></div></div>
    112  <div class="test test-3"><div class="test-3-child"></div></div>
    113  <div class="test test-4">
    114    <section>
    115      <span><b></b></span>
    116    </section>
    117  </div>
    118  <div class="test test-6"><div></div></div>
    119  <div class="test t7- t7--"><div class="test-7-child"></div></div>
    120  <div class="test test-8"><div></div></div>
    121  <div class="test test-9 t9-- t9-"><div></div></div>
    122  <div class="test test-10"><div></div></div>
    123  <div class="test test-11"><div></div></div>
    124  <div class="test test-12"></div>
    125  <div class="test test-13"></div>
    126  <div class="test test-14"></div>
    127 </body>