hijos - ¿Cómo obtengo el enésimo hijo de un elemento usando los selectores de CSS2?

selectores avanzados css

Question

¿Hay alguna posibilidad de obtener el enésimo elemento de una lista ordenada en CSS2?

(similar a :nth-child() en CSS3)

FYI: Estoy tratando de programar la versión alemana de Parcheesi para que sea compatible con XHTML 1.1 y CSS2 y tratando de generar el campo de juego usando listas ordenadas, por lo que las opciones de movimiento están predeterminadas por la estructura de datos. Para posicionar el camino alrededor del centro, me gustaría seleccionar los elementos de la lista por número.

Answer 1

No, no puedes. nth-child() se introdujo en CSS3, por lo que no creo que haya una forma de evitar ese problema.

• http://www.w3.org/TR/selectors/#nth-child-pseudo

Answer 2

Puede utilizar los combinadores de hermanos adyacentes junto con la pseudoclase del :first-child , repitiendo los combinadores todas las veces que necesite para llegar a cierto n enésimo hijo. Esto también se menciona en una respuesta a una pregunta diferente .

Para cualquier elemento E , comience con E:first-child , luego agregue + E para los hijos siguientes hasta llegar al elemento al que se dirige. No tiene que usar el mismo elemento E , por supuesto; Podrías cambiarlo por cualquier tipo, clase, ID, etc., pero los bits importantes son los signos de :first-child y + .

Como ejemplo, para obtener el tercer li de su ol , el siguiente selector de CSS3:

ol > li:nth-child(3)

Sería replicado en CSS2 así:

ol > li:first-child + li + li

Una ilustración:

<ol>
  <li></li> <!-- ol > li:nth-child(1), ol > li:first-child -->
  <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li -->
  <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li -->
  <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li -->
</ol>

Tenga en cuenta que, dado que no hay combinados hermanos que tengan en cuenta a los hermanos anteriores (ni en CSS2 ni CSS3), no puede emular :nth-last-child() o :last-child utilizando los selectores de CSS2.

Además, solo puede emular :nth-child(b) para un niño específico a la vez, donde b es un número constante en la fórmula an+b (como se describe en la especificación ); no puede lograr ninguna fórmula compleja con los combinadores de hermanos adyacentes solo.