Border radius and first child


One the above code I am populating HTML through Javascript, but I am confused by this code which accidentally delivers what I had visualized:

.calendar:first-child {
  border-top-left-radius: 15px;  
  border-top-right-radius: 15px;  
  border-bottom-left-radius: 15px;  
  border-bottom-right-radius: 15px; 
  /* border: 1px solid red; */
}

The first child of the calendar class is the first button element then how come all edges are getting border?

There’s something wrong with your Pen link. Can you update the URL?

1 Like

Yes, https://codepen.io/codeispoetry/pen/rNQOQyG?editors=1010

No, that’s not what the code does. .calendar:first-child means the first .calendar element. So if you had other calendars following it, they wouldn’t get rounded corners.

So, to repeat, calendar:first-child targets a calendar element that is the first one inside its container. It has nothing to do with the .button elements inside the calendar.

2 Likes

Sir, Calendar first child(.calendar:first-child) is this container →

<div class="calendar one" data-no-of-days="70">
or
<div class="button">

If there are many this will point to first div with class container?

right?

.calendar:first-child {
  border-top-left-radius: 15px;  
  border-top-right-radius: 15px;  
  border-bottom-left-radius: 15px;  
  border-bottom-right-radius: 15px; 
  /* border: 1px solid red; */
}

.calendar:first-child is <div class="calendar one">.

Yes. I duplicated the .calendar div in your Pen and posted the image above of what happens to the second .calendar div. The second (and third etc.) will not have rounded corners.

2 Likes

Sir, This is slightly out of topic based on what was actually asked. Can HTML markup be changed or improved I have seen instead of this →


<div class="button">
  <div class="day">Sun</div>
  <div class="date__month">
    <div class="date">12</div>
    <div class="month">Jun</div>
  </div>
</div>

The button HTML tag is used and then span inside later span tags are converted to block element. Is this good and any advantage to using a button HTML tag?

Your JavaScript is looping 70 times but 63 dates are hidden due to overflow.

You need to consider how to display your calendar on a small smartphone with a screen that is only 320 pixels wide.

I will create a slider later.

Fonts will be made responsive SUN will be changed to S, for example.

This could be further minimized and adjusted by adjusting fonts.

Even at 270px, it adapts good →

I would have used an HTML table for this with the top row having <th> cells.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.