質問: **最終的にやりたいこと** 下記で、・で開始されない文字列(「あいうえお」と「かきくけこ」)に対して強調表示したい ``` あいうえお かきくけこ ・さし ・たち ・なに ・はひ ・まみ ``` **条件** ・HTMLタグを事前に変更することはできません ※liタグなどは使用できない。行数も順番も変動する --- **質問** ・CSSだけでは無理ですか? 先頭文字が・であるという条件分岐は疑似要素を使用してもできない? ・JavaScriptを使用すればできますか? `「先頭が・末尾が」以外の行の先頭タグ`にclassを付与すれば良い? 後からJavaScriptでclassを付与できれば、CSSがHTMLに反映されますか?
回答: 現状の CSS では**テキストノードの任意の箇所を選択出来ません**。JavaScript で動的に要素を追加し、そこに装飾を追加しておく必要があります。たとえば、 `Node.childNodes` プロパティで子ノードを取得し、その中で条件に合致するノードを `Node.replaceChild` メソッドを用いて装飾を適用した要素と入れ替える、という方法があります。 今回は文書構造を変更出来ないという前提がありますが、本来であれば予め適切な要素によるマークアップを行っておくほうが JavaScript によってテキストノードを操作する負担が存在しない分だけ、楽になると思います。 ``` const p = document.querySelector("p"); for (const node of p.childNodes) { if (node.nodeType == Node.TEXT_NODE) { const text = node.nodeValue.trim(); if (!text || text[0] == "・") continue; const span = document.createElement("span"); span.textContent = text; span.style.cssText = "color: red;"; p.replaceChild(span, node); } } ``` ``` あいうえお かきくけこ ・さし ・たち ・なに ・はひ ・まみ ```