JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<statement><variable-declaration>statement block</variable-declaration></statement>

<statement><control-structure><variable-declaration>not a statement block</variable-declaration><block>
  <statement><variable-declaration>statement block in a block</variable-declaration></statement>
</block></control-structure></statement>

<statement><wrapper5><wrapper4><wrapper3><wrapper2><wrapper1><variable-declaration>statement block with 5 wrappers</variable-declaration></wrapper1></wrapper2></wrapper3></wrapper4></wrapper5></statement>

CSS

body{
  color:white;
  --is-statement-block:false; 
}
statement{
  color:green;
  --is-statement-block:true;
}
control-structure{
  color:red;
  --is-statement-block:false;
}

JavaScript

let variableDeclarations = document.querySelectorAll('variable-declaration');
for(let i=0; i<variableDeclarations.length; i++){
    if(window.getComputedStyle(variableDeclarations[i],
         null).getPropertyValue('--is-statement-block')=="true")
       alert(variableDeclarations[i].innerHTML+' is a statement.');
    else
       alert(variableDeclarations[i].innerHTML+' is not a statement.');
  
}