How can i achieve this using css - css

Question

This is look I'm trying to achive
<ul>
<li class="btn">A</li>
<li class="btn" hidden>B</li>
<li class="btn" hidden>C</li>
<li >D</li>
<li >E</li>
</ul>
or it can be like this
<ul>
<li class="btn">A</li>
<li class="btn" hidden>B</li>
<li class="btn">C</li>
<li >D</li>
<li >E</li>
</ul>
and this too
<ul>
<li class="btn">A</li>
<li class="btn">B</li>
<li class="btn">C</li>
<li >D</li>
<li >E</li>
</ul>
I tried css first and last child it did not work. button set need to appear as a group and first and last element need to be rounded, in some cases, the button group might have only two buttons, or just one. any advice ?
ul li.btn:first-child {
padding-left: 7px;
border-radius: 50px 0px 0px 50px;
}
ul li.btn:last-child {
padding-right: 7px;
border-radius: 0px 50px 50px 0px;
}

Answer 1

You were on the right track. This is what you are looking for:
ul {
list-style: none;
display: flex;
}
li {
padding: 16px;
}
li.group {
background-color: lightgray;
}
li.first {
border-radius: 50% 0 0 50%;
}
li.last {
border-radius: 0 50% 50% 0;
}
<ul>
<li class="group first">A</li>
<li class="group">B</li>
<li class="group">C</li>
<li class="group">D</li>
<li class="group last">E</li>
<li>F</li>
<li>G</li>
</ul>
Edit If you do not want the first and last class, this is a workaround
NOTE: this only works in this specific case:
group of buttons is always at the start
there is only one group, no other elements in between
this actually moves element B to the back
ul {
list-style: none;
display: flex;
}
li {
padding: 16px;
}
li.group {
background-color: lightgray;
}
li.group:first-child {
border-radius: 50% 0 0 50%;
}
li.group~.group~.group {
border-radius: 0;
order: 0;
}
li.group~li.group {
border-radius: 0 50% 50% 0;
order: 1;
}
li:not(.group) {
order: 2;
}
<ul>
<li class="group">A</li>
<li class="group">B</li>
<li class="group">C</li>
<li class="group">D</li>
<li class="group">E</li>
<li>F</li>
<li>G</li>
</ul>

Answer 2

ul {
list-style: none;
display: flex;
}
li {
padding: 16px;
}
li.btn {
background-color: lightgray;
}
ul li.btn:first-child {
border-radius: 50% 0 0 50%;
}
ul li.btn:last-child {
border-radius: 0 50% 50% 0;
}
<ul>
<li class="btn">A</li>
<li class="btn" hidden >B</li>
<li class="btn">C</li>
<li >D</li>
<li >E</li>
</ul>

Answer 3

Do you want to group the list items no matter how many items available ?
i think this is what you need:
.group,
.list {
display: flex;
align-items: center;
}
.list>div:not(.group) {
padding: 5px;
}
.group>div {
padding: 5px;
border: 1px solid #ccc;
}
.group>div:first-child {
border-radius: 5px 0 0 5px;
}
.group>div:last-child {
border-radius: 0 5px 5px 0;
}
<div class="list">
<div class="group">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>D</div>
<div>E</div>
<div class="group">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>D</div>
<div>E</div>
</div>