Treat multiple adjacent <li> items as one single item without wrapping them in another element-CodePudding

I have an <ul> that I have no control over (react),a nd I want to put a box and border around some of them.

Basically, I have:

<ul>
  <li>Results...</li>
  <li><</li>
  <li>1</li>
  <li>2</li>
  <li>></li>
  <li>Something else</li>
</ul>

Screenshot:

And I want them to be wrapped like this:

The problem like I said is that I dont have control over the actual element and the way it is being rendered, so I can't redo it with divs, and I want to wrap all li items except the first and last.

Current HTML is, the way the component renders it is :

<ul class="ant-pagination">
  <li class="ant-pagination-total-text">Results...</li>
  <li class="ant-pagination-prev"><</li>
  <li class="ant-pagination-item">1</li>
  <li class="ant-pagination-item">2</li>
  <li class="ant-pagination-next">></li>
  <li class="ant-pagination-options">Dropdown with options about setting table page size</li>
</ul>

The CSS that I have applied to reorder the items the way I need them displayed:

.ant-pagination {
  justify-content: center;
} 

.ant-pagination > li:last-child {
  order: 1;
  margin-left: 20px;
}

.ant-pagination > li:first-child {
  order: 2;
  margin: 0 auto;
}

.ant-pagination > li:not(:first-child):not(:last-child) {
  order: 3;
}

This CSS reordered the items the way I need them to be:

Of course I have additional styling CSS on top of that.

.ant-pagination > li:not(:first-child):not(:last-child) this selector targets the items that I need to be targeted and want wrapped.

In essence I need to do:

<ul>
  <li>Results...</li>
  <div class="li-wrapper">
    <li><</li>
    <li>1</li>
    <li>2</li>
    <li>></li>
  </div>
  <li>Something else</li>
</ul>

.li-wrapper {
  border: 1px solid black;
}

CodePudding user response：

ul li {
  padding: 4px;
  max-width: 16px;
}

ul li:not(:first-child, :last-child) { 
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

ul li:nth-last-child(2) {
  border-bottom: 1px solid #000;
}

ul li:nth-child(2) {
  border-top: 1px solid #000;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

May be using the :not selector of CSS, like:

ul li:not(:first-child, :last-child) { 
  color: red;
}

CodePudding user response：

Sorry for not understanding it well but I am not sure what you meant by you have no control over the elements but then you applied CSS to those elements. Anyway, wouldn't a simple border style and padding in your ant-pagination work?

.ant-pagination {
  background: 1px solid black;
  //or whatever padding the design says
  padding: 10px;
}