What is the best method for choosing all elements located between two specific elements?

Question

What is the best method for choosing all elements located between two specific elements?

If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery?

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

css css-selectors

Answer 1

Answer №1

If you're in search of the ~ general sibling combinator, then look no further

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

The purpose of the above selector is to target all the p elements that come after #one up to #two, and using :not() pseudo to exclude the final 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

If you're in search of the ~ general sibling combinator, then look no further

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

The purpose of the above selector is to target all the p elements that come after #one up to #two, and using :not() pseudo to exclude the final 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 3

Answer №2

When dealing with two sibling elements (meaning they have the same parent), Selectors 3 does not provide a way to target elements between them if the structure of the elements is unknown or subject to change.

Selectors 3 allows you to select elements between two siblings only if one or both of the following conditions are met:

If the positional relationship of the elements in the parent tree is known.

For instance, if #one is always the first child and #two is always the last child, you can use:
```
#one ~ p:not(#two)
```
or
```
#one ~ p:not(:last-child)
```
If #one is the second child and #two is the fifth child:
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-child(n+5))
```
If #one is the second child and #two is the third last child:
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-last-child(-n+3))
```
If the number of elements to be matched is known.

It is important to note that if the first condition is met, it is preferable to use the techniques mentioned there. This following technique should be a last resort for cases where the first condition is not applicable.

If there will always be n elements between #one and #two, you can build a list of selectors starting from #one, adding + p to each subsequent selector up to n times.

For example, if there are only three p elements between #one and #two:
```
#one + p,
#one + p + p,
#one + p + p + p
```

In Selectors 4, assuming #one and #two are unique in a conforming document, the following selectors are reliable (meaning they work regardless of the structure of elements, even if it changes):

#one ~ p:has(~ #two)

or

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

When using jQuery or other non-CSS contexts where it is supported, utilize :has(); in CSS, use :not() since :has() with the ~ combinator may not be universally supported. Currently, the latter method is functional in Safari, but its availability in other browsers is still uncertain.

Answer 4

When dealing with two sibling elements (meaning they have the same parent), Selectors 3 does not provide a way to target elements between them if the structure of the elements is unknown or subject to change.

Selectors 3 allows you to select elements between two siblings only if one or both of the following conditions are met:

If the positional relationship of the elements in the parent tree is known.

For instance, if #one is always the first child and #two is always the last child, you can use:
```
#one ~ p:not(#two)
```
or
```
#one ~ p:not(:last-child)
```
If #one is the second child and #two is the fifth child:
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-child(n+5))
```
If #one is the second child and #two is the third last child:
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-last-child(-n+3))
```
If the number of elements to be matched is known.

It is important to note that if the first condition is met, it is preferable to use the techniques mentioned there. This following technique should be a last resort for cases where the first condition is not applicable.

If there will always be n elements between #one and #two, you can build a list of selectors starting from #one, adding + p to each subsequent selector up to n times.

For example, if there are only three p elements between #one and #two:
```
#one + p,
#one + p + p,
#one + p + p + p
```

In Selectors 4, assuming #one and #two are unique in a conforming document, the following selectors are reliable (meaning they work regardless of the structure of elements, even if it changes):

#one ~ p:has(~ #two)

or

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

When using jQuery or other non-CSS contexts where it is supported, utilize :has(); in CSS, use :not() since :has() with the ~ combinator may not be universally supported. Currently, the latter method is functional in Safari, but its availability in other browsers is still uncertain.

Answer 5

Answer №3

    #first ~ :not( #second ~ * ):not( #second )

Selects all elements that are preceded by #first but not preceded by #second and are not #second

A simple yet effective logic to enhance your coding experience

[UPDATE]

For optimal browser compatibility:

    :not(#first) {
      color: black /* color for elements outside of range */
    }
    
    #first~* {
      color: red;
    }
    
    #second~* , #second {
      color: black /* color for elements outside of range */
    }

Answer 6

    #first ~ :not( #second ~ * ):not( #second )

Selects all elements that are preceded by #first but not preceded by #second and are not #second

A simple yet effective logic to enhance your coding experience

[UPDATE]

For optimal browser compatibility:

    :not(#first) {
      color: black /* color for elements outside of range */
    }
    
    #first~* {
      color: red;
    }
    
    #second~* , #second {
      color: black /* color for elements outside of range */
    }

Answer 7

Answer №4

To separate the elements, wrap them in a div element and assign it an id that can be targeted in the CSS file to style the contents.

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

#uniqueID {
    color: blue;
}

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

Answer 8

To separate the elements, wrap them in a div element and assign it an id that can be targeted in the CSS file to style the contents.

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

#uniqueID {
    color: blue;
}

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

Answer 9

Answer №5

Absolutely, it is possible to target elements between two specific elements:

.container {
  display: grid;
  grid-template-columns: 1fr;
}

.base {
  width: 100px;
  height: 50px;
  background: gray;
  border-radius: 8px;
  margin-bottom: 5px;
}

.first, .second {
  background: green;
}

.first ~ :not(.second):not(.second ~ *) {
    background: blue;
}

<div class='container'>
  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base first'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base second'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

</div>

https://codepen.io/Sariato-Jinks/pen/rNgdMbM

Answer 10

Absolutely, it is possible to target elements between two specific elements:

.container {
  display: grid;
  grid-template-columns: 1fr;
}

.base {
  width: 100px;
  height: 50px;
  background: gray;
  border-radius: 8px;
  margin-bottom: 5px;
}

.first, .second {
  background: green;
}

.first ~ :not(.second):not(.second ~ *) {
    background: blue;
}

<div class='container'>
  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base first'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base second'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

  <div class='base'>
  </div>

</div>

https://codepen.io/Sariato-Jinks/pen/rNgdMbM

What is the best method for choosing all elements located between two specific elements?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

CSS is not appearing on my Node.js server application

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

Unable to execute a basic opacity transition on a div element

What is the method for activating or deactivating pointer events for a particular section of an element?

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

What is the functionality of bootstrap colors?

Is there a way to verify and send notifications when duplicate entries are added to my table?

Is it possible to convert the text.json file into a jQuery animation?

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

the overflow issue with Summernote's dropdown menu

How to implement an 8-column layout within a 12-grid bootstrap framework?

What steps can I take to ensure my header image adjusts properly for different screen sizes?

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

ChakraUI failing to display on the screen

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

What is the best way to implement a 'box-shadow-right' that stops at the border?

Centered image

Using jQuery to animate two images simultaneously in opposite directions

Open the overflow div within a table data cell

Flex mode allows for responsive row details in ngx-datatable