CODEWITHSUNDEEP
csssassless
Fernando
Fernando

Reputation: 23

How can i achieve this using css

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;
}

Upvotes: 0

Views: 53

Answers (3)

Jannes Carpentier
Jannes Carpentier

Reputation: 1898

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>

Upvotes: 1

Fernando
Fernando

Reputation: 23

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>

Upvotes: 1

MajiD
MajiD

Reputation: 2585

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>

Upvotes: 0

Related Questions