diff --git a/html_resources/main.css b/html_resources/main.css index d7b451c..8cb6de0 100644 --- a/html_resources/main.css +++ b/html_resources/main.css @@ -93,7 +93,7 @@ pre > div{ .comment{ color: rgb(50,180,90) } .selector{ color: silver } -.pseudo{ color: silver } +.pseudo{ color: violet } .id{ color: rgb(240, 148, 138) } .class{ color: skyblue } .attribute{ color: rgb(120,230,170) } diff --git a/html_resources/selector.js b/html_resources/selector.js index fddfdf8..ba9daa5 100644 --- a/html_resources/selector.js +++ b/html_resources/selector.js @@ -266,7 +266,16 @@ const Highlighter = new(function(){ clearCodeBlock(); let node = document.createElement("div"); - + + function createNewRuleset(){ + let ruleset = document.createElement("span"); + ruleset.className = "ruleset"; + node.appendChild(ruleset); + return ruleset + } + + let rulesetUnderConstruction = createNewRuleset(); + function createElementFromToken(type,c){ if(token.length === 0 && !c){ return @@ -275,6 +284,8 @@ const Highlighter = new(function(){ switch(type){ case "selector": + // This isn't exactly correct, but it works because parser treats \r\n sequences that follow a closed comment as "selector" + rulesetUnderConstruction = createNewRuleset(); let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/); for(let part of parts){ @@ -341,7 +352,7 @@ const Highlighter = new(function(){ n.className = (`token ${type}`); token = ""; - node.appendChild(n); + rulesetUnderConstruction.appendChild(n); return }