parent-selector.html

<pre class="grvsc-container default-light grvsc-ps-tYvMB2" data-language="js" data-index="0"><code class="grvsc-code"><span class="grvsc-line"><span class="grvsc-source"><span class="grvsc-t7UkM5-9 grvsc-tYvMB2-10">console</span><span class="grvsc-t7UkM5-1 grvsc-tYvMB2-1">.</span><span class="grvsc-t7UkM5-10 grvsc-tYvMB2-11">log</span><span class="grvsc-t7UkM5-1 grvsc-tYvMB2-1">(</span><span class="grvsc-t7UkM5-17 grvsc-tYvMB2-8">"Hello, world!"</span><span class="grvsc-t7UkM5-1 grvsc-tYvMB2-1">);</span></span></span></code></pre>
<style class="grvsc-styles">
  .grvsc-container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
    line-height: 1.4;
  }
  
  .grvsc-code {
    display: table;
  }
  
  .grvsc-line {
    display: table-row;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  
  .grvsc-line > * {
    position: relative;
  }
  
  .grvsc-gutter-pad {
    display: table-cell;
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  .grvsc-gutter {
    display: table-cell;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter::before {
    content: attr(data-content);
  }
  
  .grvsc-source {
    display: table-cell;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-source:empty::after {
    content: ' ';
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  .grvsc-gutter + .grvsc-source {
    padding-left: 0.75rem;
    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
  }
  
  /* Line transformer styles */
  
  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {
    content: ' ';
    position: absolute;
    width: 100%;
  }
  
  .grvsc-line-diff-add::before {
    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
  }
  
  .grvsc-line-diff-del::before {
    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
  }
  
  .grvsc-line-number {
    padding: 0 2px;
    text-align: right;
    opacity: 0.7;
  }
  
  .default-light {
    background-color: #FFFFFF;
    color: #000000;
  }
  .default-light .grvsc-t7UkM5-9 { color: #267F99; }
  .default-light .grvsc-t7UkM5-1 { color: #000000; }
  .default-light .grvsc-t7UkM5-10 { color: #795E26; }
  .default-light .grvsc-t7UkM5-17 { color: #A31515; }
  .default-light .grvsc-line-highlighted::before {
    background-color: var(--grvsc-line-highlighted-background-color, rgba(0, 0, 0, 0.05));
    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(0, 0, 0, 0.2));
  }
  .dark .grvsc-ps-tYvMB2 {
    background-color: #1E1E1E;
    color: #D4D4D4;
  }
  .dark .grvsc-ps-tYvMB2 .grvsc-tYvMB2-10 { color: #4EC9B0; }
  .dark .grvsc-ps-tYvMB2 .grvsc-tYvMB2-1 { color: #D4D4D4; }
  .dark .grvsc-ps-tYvMB2 .grvsc-tYvMB2-11 { color: #DCDCAA; }
  .dark .grvsc-ps-tYvMB2 .grvsc-tYvMB2-8 { color: #CE9178; }
  .dark .grvsc-ps-tYvMB2 .grvsc-line-highlighted::before {
    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));
    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));
  }
</style>