URLのエスケープをプレビューでデコードする
ジェネレーター欲しい
importしたいけどうまくいかない
code:style.css
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="0"::after{
content: " " !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="1"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="1"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="1"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="1"::after{
content: "!" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="2"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="2"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="2"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="2"::after{
content: "\"" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="3"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="3"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="3"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="3"::after{
content: "#" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="4"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="4"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="4"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="4"::after{
content: "$" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="5"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="5"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="5"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="5"::after{
content: "%" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="6"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="6"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="6"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="6"::after{
content: "&" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="7"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="7"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="7"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="7"::after{
content: "\'" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="8"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="8"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="8"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="8"::after{
content: "(" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="9"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="9"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="9"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="9"::after{
content: ")" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="A"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="A"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="A"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="A"::after{
content: "*" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="B"::after{
content: "+" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="C"::after{
content: "," !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="F"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="F"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="F"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="F"::after{
content: "/" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="A"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="A"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="A"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="A"::after{
content: ":" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="B"::after{
content: ";" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="C"::after{
content: "<" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="D"::after{
content: "=" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="E"::after{
content: ">" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="F"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="F"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="F"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="F"::after{
content: "?" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="4" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="4":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="4" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="4" + spandata-char="0"::after{
content: "@" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="B"::after{
content: "[" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="D"::after{
content: "]" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="E"::after{
content: "^" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="6" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="6":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="6" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="6" + spandata-char="0"::after{
content: "`" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="B"::after{
content: "{" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="C"::after{
content: "|" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="D"::after{
content: "}" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="E"::after{
content: "~" !important;
font-size:15px !important;
}
/* %C2%A0 → 半角スペース */
a.link spandata-char="%":has(+ spandata-char="C" + spandata-char="2" + spandata-char="%" + spandata-char="A" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="C":has(+ spandata-char="2" + spandata-char="%" + spandata-char="A" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="C" + spandata-char="2":has(+ spandata-char="%" + spandata-char="A" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="C" + spandata-char="2" + spandata-char="%":has(+ spandata-char="A" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="C" + spandata-char="2" + spandata-char="%" + spandata-char="A":has(+ spandata-char="0") {
display: none !important;
}
a.link spandata-char="%" + spandata-char="C" + spandata-char="2" + spandata-char="%" + spandata-char="A" + spandata-char="0" {
font-size: 0 !important;
}
a.link spandata-char="%" + spandata-char="C" + spandata-char="2" + spandata-char="%" + spandata-char="A" + spandata-char="0"::after {
content: " " !important; /* 半角スペース */
font-size: 15px !important;
}
code:.js
((s) => `:is(${...s.map((_, i, a) =>
a.slice(0, i + 1).map(c => span[data-char="${c}"]).join(" + ") +
(i < a.length - 1 ? :has(+${a.slice(i + 1).map(c => spandata-char="${c}").join(" + ")}) : "")
).join(", ")})`)("")
code:result.css
:is(spandata-char="%":has(+spandata-char="0" + spandata-char="A"), spandata-char="%" + spandata-char="0":has(+spandata-char="A"), spandata-char="%" + spandata-char="0" + spandata-char="A")
作戦変更
code:hogefaofa.css
spandata-char="%":has(+ spandata-char="0" + spandata-char="A"):is(+ *, + * + * )
しかし，parent:is()セレクタはparentをふくむことができない
parentを重複して書くしかない
セレクトしないことを表すセレクタがあればいいのに
あってもなくても変わらないような
0のような
cssには0がない
を使うと一応達成できる
がCSSのプリプロセッサという位置付けなので，document.querySelectorには渡せない
code:hoge2.js
(s=>((c)=>span[data-char="${c[0]}"]:has(${c.slice(1).map(x=>+ spandata-char="${x}").join(' ')}) { &, ${c.slice(1).map((_,i)=>+ ${'* + '.repeat(i)}*).join(', ')} { } })(...s))("")
code:hoge2.css
spandata-char="%":has(+ spandata-char="0" + spandata-char="A") { &, + *, + * + * {
} }