CODEWITHSUNDEEP
csscss-selectors
John Taylor
John Taylor

Reputation: 779

Border Radius only for the first and last child

Here is my problem:

I need rounded border only for first and last element? How can I accomplish that?

This is my css:

 .root {
      display: flex;
      width: 100%;
      height: 56px;
      align-items: center;
      border-radius: var(--radius-medium)px;
      border: 1px solid var(--color-gray2);
    }

    .icon {
      display: flex;
      align-items: center;
      padding: 0 15px;
    }

    .text {
      color: #000;
      font-size: calc(var(--font-size-body) / 10)rem;
    }

This is from React:

//<ListElementRoot> === .root
//<ListElementIcon> === .icon
//<ListElementText> === .text



  return (
    <ListElementRoot>
      <ListElementIcon>
        <Icon name={icon} color={color} />
      </ListElementIcon>
      <ListElementText>
        {children}
      </ListElementText>
    </ListElementRoot>
  )
}

That is all, I know I should do something with first and last element, but how to do it in my case? Any ideas?

Borders are generated by root...

Upvotes: 0

Views: 3022

Answers (2)

Johannes
Johannes

Reputation: 67778

I suppose you mean that the first and last one should still have non-rounded edges at the inner sides:

.root {
  width: 200px;
  height: 80px;
  border: 1px solid black;
}

.root:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.root:last-of-type {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
<div>
  <div class="root">1
  </div>
  <div class="root">2
  </div>
  <div class="root">3
  </div>
  <div class="root">4
  </div>
</div>

Upvotes: 4

Djaouad
Djaouad

Reputation: 22776

You can use :first-child and :last-child for this:

.root { /* all .root */
    display: flex;
    width: 100%;
    height: 56px;
    align-items: center;
    border: 1px solid var(--color-gray2);
}
.root:first-child, .root:last-child { /* first or last .root only */
    border-radius: var(--radius-medium)px;
}

Upvotes: 0

Related Questions