CODEWITHSUNDEEP
htmlcss
Ole
Ole

Reputation: 47090

Setting border radius of first and last child to zero?

I have a project test page here and for test 23 (u-button-group) I'm trying to set the border radius of the first and last items in u-button-group (There are only 2) to 0px, and right now it's not working. This is the css for the u-button-group and I'll include screenshot as well:

  .u-button-group {
    display: inline-flex;
    flex-direction: row;
  }

  .u-button-group: first-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }

  .u-button-group: last-child {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }

enter image description here

The source code for the u-button-group utilities can also be found here. Thoughts?

Upvotes: 0

Views: 899

Answers (2)

Roy Scheffers
Roy Scheffers

Reputation: 3908

I think you are looking for this.

.u-button-group .bs-Button--primary:first-child

In your example, you are not specific enough to select the button. The child in your example is referring to the u-button-group not the button itself.

Here's what the MDN specs are saying.

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

Here's a working example that selects the buttons instead.

.u-button-group {
  display: inline-flex;
  flex-direction: row;
}

.u-button-group .bs-Button--primary {
  border-radius: 10px;
  padding: 5px;
}

.u-button-group .bs-Button--primary:first-child {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.u-button-group .bs-Button--primary:last-child {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
<div class="TestRender">
  <div class="u-button-group">
    <button class="bs-Button--primary">first block button</button>
    <button class="bs-Button--primary">lastblock button</button>
  </div>
</div>

Upvotes: 2

ESP32
ESP32

Reputation: 8713

You are looking for .u-button-group button:first-child {...}

The term "child" is maybe a bit misleading. As it describes a property of a button in the above example, it references on the first button. If you use it on .u-button-group it would mean the first of those groups.

Upvotes: 2

Related Questions