css - has - ¿Cómo seleccionar todos los elementos entre dos elementos?

css selector selenium

Question

Si tengo este HTML, ¿cómo puedo seleccionar todos los elementos entre #one y #two con CSS? No puedo usar jQuery.

<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>

Answer 1

El ~ combinador general de hermanos es lo que estás buscando

#one ~ p:not(#two) {
  color: red;
}

Entonces, lo que hace el selector anterior es, comienza seleccionando todos los p elementos que son adyacentes a #one till #two y más tarde, uso :not() pseudo para excluir la última p :

#one ~ p:not(#two) {
    color: red;
}

<p id="one">0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="two">6</p>

JSFiddle

Answer 2

Puede envolver los elementos en un elemento div y asignarle una ID que luego usará en el archivo CSS para seleccionar lo que está dentro de la etiqueta.

<div id="ID">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

#id {
    color:red;
}

<p>1</p>
<div id="id">
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<p>6</p>

Answer 3

Dado dos elementos que son hermanos (es decir, tienen el mismo padre), no es posible en los selectores 3 escribir un selector que coincida con los elementos entre ellos si no se conoce la estructura de los elementos (o si se sabe que cambia).

En Selectores 3, solo puede hacer coincidir los elementos entre ellos si una de las siguientes afirmaciones es verdadera o ambas:

1. La posición del árbol de los dos elementos con respecto a su padre es conocida.

   Por ejemplo, si #one es siempre el primer hijo y #two es siempre el último hijo, esto es bastante fácil:

   #one ~ p:not(#two)

   o

   #one ~ p:not(:last-child)

   (Tenga en cuenta que no incluyo :not(:first-child) porque ~ combinador ya asegura que el primer elemento coincidente nunca es el primer hijo; es posible que desee incluirlo para la especificidad adicional o incluso solo por el bien de claridad.)

   Si #one es siempre el segundo hijo y #two es siempre el quinto hijo:

   #one ~ p:not(:nth-child(-n+2)):not(:nth-child(n+5))

   Si #one es siempre el segundo hijo y #two es siempre el tercer último hijo:

   #one ~ p:not(:nth-child(-n+2)):not(:nth-last-child(-n+3))

2. La cantidad de elementos para unir es conocida.

   Tenga en cuenta que si el # 1 es verdadero, debe usar las técnicas descritas en el # 1, no aquí. La siguiente técnica es extremadamente tediosa y está destinada a ser el último recurso cuando # 1 no es verdad.

   Si solo habrá n elementos entre #one y #two , tendrá que crear una lista de selectores que empiecen con #one , agregando + p a cada selector sucesivo hasta n veces.

   Por ejemplo, si solo existirán tres elementos p entre #one y #two :

   #one + p,
   #one + p + p,
   #one + p + p + p

En Selector 4, suponiendo que #one y #two son únicos como en un documento conforme, los siguientes selectores son robustos (es decir, funcionan para cualquier estructura de elementos, incluso si se sabe que cambia ):

#one ~ p:has(~ #two)

o

#one ~ p:not(#two, #two ~ p)

Uso :has() en jQuery y otros contextos que no son CSS donde es compatible, y :not() en CSS (donde :has() no se espera que sea compatible con :has() con el ~ combinator). Este último actualmente funciona en Safari ; aún no se sabe cuándo se enviará en otros navegadores.