https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ol_type_all_css
Quiero extraer el carácter correcto según el tipo de estilo de lista y el índice numérico en CSS
Por ejemplo, si quiero el carácter para 3 en list-style-type: lower-greek; : γ
Ejemplo 2, quiero el carácter para 9 en list-style-type: cjk-ideographic; : 九
Ejemplo 3, quiero los caracteres 1,2,3 en list-style-type: lower-roman; : yo, ii, iii
¿Hay alguna manera de hacer esto fácilmente con código?
Creo que los caracteres para 3 tendrían un índice de 2, y los caracteres para 9 tendrían un índice de 8... ya que la indexación comienza en 0.
¿Cómo devuelvo los caracteres correctos para los números que quiero, según el tipo de estilo de lista?
Creo que tendrá que usar el selector secundario n-th , combinado con list-style-type: 'γ. '; ( documentos de mozilla )!
<ul> <li>a, b, c, d</li> <li>e, f, g, h</li> <li>i, j, k, l</li> <li>...</li> <li>now i know my abc's!</li> </ul> ul { list-style-type: lower-greek; } li:nth-child(3) { list-style-type: 'γ. '; }Aunque no sé si hay una solución mejor. Volveré a consultar para futuros comentarios.
Después de la segunda lectura, creo que a lo que te refieres es en realidad algo similar a lo que se muestra en esta publicación de css-tricks . Puede buscar los estilos de contador predefinidos en este sitio web y luego escribir el javascript correspondiente para evaluarlos y mapearlos. También relevante: pruebas unitarias para CSS3 Counter Styles en relación con kits de navegador [ url ].
Aquí hay una forma de hacerlo: https://codepen.io/netrules/pen/KKXPWEo
const charmap = "900 ϡ, 800 ω, 700 ψ, 600 χ, 500 φ, 400 υ, 300 τ, 200 σ, 100 ρ, 90 ϟ, 80 π, 70 ο, 60 ξ, 50 ν, 40 μ, 30 λ, 20 κ, 10 ι, 9 θ, 8 η, 7 ζ, 6 στ, 5 ε, 4 δ, 3 γ, 2 β, 1 α"; const processedChars = charmap.split(", "); const mapArray = processedChars.map(x => { let vals = x.split(" "); return {rem:vals[0], symbol:vals[1]}; }) function evalNumberToListKey(num) { let numCalc = num; let out = ''; for(let element of mapArray) { const temp = numCalc%element.rem; if(temp !== numCalc) { numCalc = temp; out += element.symbol; } if(numCalc === 0) { break; } } return out; } document.write(evalNumberToListKey(951));