css - organizacional - ¿Cómo puedo dirigirme a un grupo específico de hermanos en una jerarquía plana?

organizacion horizontal pdf

Question

Supongamos que tiene este HTML:

<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Tenga en cuenta que la jerarquía es plana.

Ahora intenta seleccionar el "par medio" de elementos <p> . es posible? Realmente no puedo entender cómo.

Este selector solo capta la primera <p> sigue a la <h1> :

h1:nth-of-type(2) + p

Pero este selector toma el par correcto de elementos <p> más todos los siguientes elementos <p> que aparecen después del par que queremos:

h1:nth-of-type(2) ~ p

¿Es posible?

Sin JavaScript Sin cambio de marcado. Solución genérica Se permite cualquier cantidad de <h1> s o <p> s, y el número dos, en este caso, es arbitrario.

Estoy pensando que tal vez esto sea posible utilizando algunos el selector :not() , pero parece que no puedo resolverlo. Algo así como seleccionar a los "hermanos generales" y luego excluirlos según sea necesario o algo similar.

Answer 1

Debido a la forma en que funciona el combinador de hermanos en general, no es posible limitar una selección de hermanos a un rango o grupo específico, incluso de hermanos consecutivos. Incluso el selector :not() no será de ninguna ayuda aquí.

Deberá usar JavaScript para orientar los elementos correctos. El método .nextUntil() jQuery .nextUntil() inmediatamente a la mente.