1

I have two anchor tags that have border radius rules, but they're applied with the parameters first-child and last child pseduo selectors, so that the both of them together look kind of like a "pill"

See an example below:

.tc__timezone-toggle {
  display: flex;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

.tc__timezone-toggle-ui:first-child {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>

Now, what I need to now is add in some next to the left of this pill shaped UI that says a message - what I'm finding is for some reason it renders the border radius on the first child broken.

See below:

.tc__timezone-toggle {
  display: flex;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

.tc__timezone-toggle-ui:first-child {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>

Border-radius doesn't affect inner elements

The way that I understood this question, having elements next to border radiuses can have impacts.

So from the answer I tried:

#outer { overflow: hidden; }

In context of my problem this is the result:

.tc__timezone-toggle {
  display: flex;
  /* from answer */
  overflow: hidden;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

.tc__timezone-toggle-ui:first-child {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>

This did not work.

CSS Flexbox Border Radius with text-overflow: Ellipsis

This implies that you can;'t use span in conjunction with border radius.

Since the link above talks about li, I tried div and p with no luck.

I tried to find the problem (I think I'm having with the span inside a flexbox and a border radius) I'm having here but couldn't find any helpful resources relevant to what I'm dealing with:

Perfectly rouded border-radius for flexbox items

Border radius issue with div

Why is the span tag breaking my border radius?

kawnah
  • 3,204
  • 8
  • 53
  • 103

2 Answers2

2

So pretty sure your issue is that you are using the :first-child selector on an element that is not the first child among it's siblings. When you remove that first-child psuedo-class everything works. Alternatively if you want to be very specific you can instead use first-of-type which would be true for that first element. To clarify, the span is the first child in the .tc_timezone_toggle div.

.tc__timezone-toggle {
  display: flex;
  /* from answer */
  overflow: hidden;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

.tc__timezone-toggle-ui {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>
JHeth
  • 7,067
  • 2
  • 23
  • 34
0

When you add in the span element it becomes the first child, the first part of the 'pill' is no longer the first child so it doesn't receive the border radius settings.

To get round this and remain fairly general you could use first-of-type, the type being a.

.tc__timezone-toggle {
  display: flex;
  /* from answer */
  overflow: hidden;
}

.tc__timezone-toggle-ui {
  display: block;
  font-weight: 700;
  color: var(--tc-blue) !important;
  background-color: #E3E3E3;
  padding: 10px;
}

a.tc__timezone-toggle-ui:first-of-type {
  border-radius: 22px 0px 0px 22px;
}

.tc__timezone-toggle-ui:last-child {
  border-radius: 0px 22px 22px 0px;
}
<div class="tc__timezone-toggle">
  <span>TimeZone</span>
  <a class="tc__timezone-toggle-ui" href="#">PT</a>
  <a class="tc__timezone-toggle-ui" href="#">ET</a>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Ugh, I always get so confused on how this selector works (my question history has tons of questions about it), why is it hitting a span when it doesn't have that class I'm using on first child? – kawnah Jul 26 '21 at 21:16
  • Sorry, I probably described this wrongly. It's not hitting span as such. It's just not hitting anything (in your code). – A Haworth Jul 26 '21 at 21:18