How to use css to find some elements of the same level?

<p class=h1>a</p>
<p class=h2>a1</p>
<p class=h3>a11</p>
<p class=h3>a12</p>
<p class=h2>a2</p>
<p class='h1 current'>b</p>
<p class=h2>b1</p>
<p class=h3>b11</p>
<p class=h3>b12</p>
<p class=h2>b2</p>
<p class=h1>c</p>
<p class=h2>c1</p>
<p class=h2>c2</p>

I want to use css to get the following elements, how should I find it?

I tried to find it like this .current~p:not(.current~.h1~p) , but it failed.

<p class=h2>b1</p>
<p class=h3>b11</p>
<p class=h3>b12</p>
<p class=h2>b2</p>

2 Answers

-1
Rannie Aguilar Peralta On

Why not CSS :nth-child() selector?

p:nth-child(nth)

Then if you want to use it to select multiple element, just

p:nth-child(1),
p:nth-child(2),
p:nth-child(3)
0
yunzen On

By what I understood of your question you want to address all the .h2 and .h3 paragraphs that are following siblings of a .h1.current paragraph, but you want any of those who follow an intermittening .h1 that is not a .current to be not addressed by the rules.

Alas that is not possible in the current layer of CSS, because the :not() pseudo class can only take simple CSS selectors and not complex ones.

But you can try to address the following siblings and revert the style to the initial value like this.

.h1 {
  margin-left: 10px;
  text-decoration: underline double orange;
}

.h2 {
  margin-left: 30px;
  /* *1* */
  text-decoration: underline solid green;
}

.h3 {
  margin-left: 50px;
  /* *2* */
  text-decoration: underline overline dashed blue;
}

/* This gets all the followers to .h1.current which are .h2 or .h3 */
.h1.current~.h2,
.h1.current~.h3 {
 /* *3* */
  text-decoration: line-through double red;
}

/* this gets all .h2 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h2 {
  /* overwrite *3* by copying *1* properties */
  text-decoration: underline solid green;
}
/* this gets all .h3 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h3 {
  /* overwrite *3* by copying *2* properties */
  text-decoration: underline overline dashed blue;
}
<p class=h1>a (not this)</p>
<p class=h2>a1 (not this)</p>
<p class=h3>a11 (not this)</p>
<p class=h3>a12 (not this)</p>
<p class=h2>a2 (not this)</p>
<p class='h1 current'>b (this is current)</p>
<p class=h2>b1 (this)</p>
<p class=h3>b11 (this)</p>
<p class=h3>b12 (this)</p>
<p class=h2>b2 (this)</p>
<p class=h1>c (breaks the above chain)</p>
<p class=h2>c1 (not this)</p>
<p class=h3>c21 (not this)</p>
<p class=h3>c22 (not this)</p>
<p class=h2>c2 (not this)</p>

This rule should work with CSS4 .h1.current ~ p:is(.h2, .h3):not(.h1.current ~ .h1:not(.current) ~ p) but we cannot use it right now. jQuery however does support complex selectors in the :not pseudo class (but not the :is()), so here is the same example with jQuery support

.h1.current ~ p:not(.h1):not(.h1.current ~ .h1:not(.current) ~ p)

jQuery('.h1.current ~ p.h2:not(.h1.current ~ .h1:not(.current) ~ p), .h1.current ~ p.h3:not(.h1.current ~ .h1:not(.current) ~ p)').css('backgroundColor', 'magenta')
.h1 {
  margin-left: 10px;
  text-decoration: underline double orange;
}

.h2 {
  margin-left: 30px;
  /* *1* */
  text-decoration: underline solid green;
}

.h3 {
  margin-left: 50px;
  /* *2* */
  text-decoration: underline overline dashed blue;
}

/* This gets all the followers to .h1.current which are .h2 or .h3 */
.h1.current~.h2,
.h1.current~.h3 {
 /* *3* */
  text-decoration: line-through double red;
}

/* this gets all .h2 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h2 {
  /* overwrite *3* by copying *1* properties */
  text-decoration: underline solid green;
}
/* this gets all .h3 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h3 {
  /* overwrite *3* by copying *2* properties */
  text-decoration: underline overline dashed blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class=h1>a (not this)</p>
<p class=h2>a1 (not this)</p>
<p class=h3>a11 (not this)</p>
<p class=h3>a12 (not this)</p>
<p class=h2>a2 (not this)</p>
<p class='h1 current'>b (this is current)</p>
<p class=h2>b1 (this)</p>
<p class=h3>b11 (this)</p>
<p class=h3>b12 (this)</p>
<p class=h2>b2 (this)</p>
<p class=h1>c (breaks the above chain)</p>
<p class=h2>c1 (not this)</p>
<p class=h3>c21 (not this)</p>
<p class=h3>c22 (not this)</p>
<p class=h2>c2 (not this)</p>