The CSS property :last-of-type seems to be malfunctioning

As I work on creating an HTML form and incorporating CSS into it, here is a snippet of my HTML structure:

<html>
  <body>
<div class="pt-form row">

  <!-- This will be the top layer for input box -->
  <div class="pt-form-input-group">
    <label>Label1</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <div class="pt-form-input-group">
    <label>Label2</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <!-- This will be of type drop-down -->
  <div class="pt-form-input-group">
    <label>Label3</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <div class="pt-form-input-group">
    <label>Label4</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>


  <div class="pt-form-submit">
    <a href="#">ADD</a>
  </div>
</div>

<!-- build:js scripts/main.min.js -->
<script src="scripts/main.js"></script>
</body>
</html>

Here is a glimpse of how the CSS styling looks:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  /*background-color: #ecf0f1;*/
  background-color: white;
  color: black;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Form */
.pt-form {
  margin-top: 10%;
  margin-left: 25%;
}

.pt-form-input-group {
  position: relative;
  font-size: 14px;
  border: 1px solid #d3d5d8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: none;
  width: 50%;
}

.pt-form-input-group:last-of-type {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

.pt-form-input-group label {
  color: #6f8691;
  display: block;
  margin-left: 2%;
  margin-top: 2%;
}

.pt-input-text-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.pt-form-input {
  height: 60px;
  width: 100%;
  padding: 15px 12px 10px;
  font-size: 22px;
  line-height: 32px;
  border: none;
}

.pt-form-submit {
  background-color: darkorchid;
  height: 60px;
  width: 50%;
  margin-top: 2%;
  padding-top: 20px;
  padding-left: 20%;
}

.pt-form-submit a {
  color: white;
  width: 100%;
  text-decoration: none;
}

I find that when adding a border to the last input, as shown below, it doesn't render as expected:

.pt-form-input-group:last-of-type {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

For a live demonstration and to better understand the issue, you can view it at https://codepen.io/harit66/pen/jBjamj

What could possibly be causing this?

htmlcss

Answer №1

:last-of-type only works with elements, not classes. To achieve the desired effect on .pt-form-input-group, consider placing them within their own parent element and then use :last-child

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  /*background-color: #ecf0f1;*/
  background-color: white;
  color: black;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Form */
.pt-form {
  margin-top: 10%;
  margin-left: 25%;
}

.pt-form-input-group {
  position: relative;
  font-size: 14px;
  border: 1px solid #d3d5d8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: none;
  width: 50%;
}

.pt-form-input-group:last-child {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

.pt-form-input-group label {
  color: #6f8691;
  display: block;
  margin-left: 2%;
  margin-top: 2%;
}

.pt-input-text-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.pt-form-input {
  height: 60px;
  width: 100%;
  padding: 15px 12px 10px;
  font-size: 22px;
  line-height: 32px;
  border: none;
}

.pt-form-submit {
  background-color: darkorchid;
  height: 60px;
  width: 50%;
  margin-top: 2%;
  padding-top: 20px;
  padding-left: 20%;
}

.pt-form-submit a {
  color: white;
  width: 100%;
  text-decoration: none;
}
<html>

<body>
  <div class="pt-form row">

    <div>

      <!-- This will be the top layer for input box -->
      <div class="pt-form-input-group">
        <label>Label1</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <div class="pt-form-input-group">
        <label>Label2</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <!-- This will be of type drop-down -->
      <div class="pt-form-input-group">
        <label>Label3</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <div class="pt-form-input-group">
        <label>Label4</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

    </div>

    <div class="pt-form-submit">
      <a href="#">ADD</a>
    </div>
  </div>

  <!-- build:js scripts/main.min.js -->
  <script src="scripts/main.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with the elimination of bullet points in CSS navigation bars

I'm having trouble removing the bullet points from my navigation bar. I've tried using list-style-type: none and even adding !important, but it doesn't seem to work. Strangely enough, everything looks fine in Chrome, but I get an error when ...

htmlcsslistnavigation

I prefer to have my side navigation bar open on desktop and laptop screens, but closed on mobile devices

I am experiencing an issue with the side navigation menu. Is there a way to have the side nav instantly open on desktop, while remaining closed on mobile phones? I have tried using the "active" class but the side nav stays closed. <!DOCTYPE html> & ...

javascripthtmlcss

Ways to change the color of a button when it is clicked?

I am attempting to change the color of a button on another button click, but it doesn't seem to be working. function show_col(){ console.log("hello"); var path=localStorage.getItem(".physics_section #color1 button"); $(''+ ...

javascripthtml

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...

javascripthtmlvue.jscanvas

JavaScript (Create a button that toggles the visibility of an element)

I have implemented a hamburger menu that transforms into an x when clicked. I am looking to modify it so that clicking on the hamburger opens the menu, and clicking on the x closes the menu. Below is the code I have been working with: <!DOCTYPE html&g ...

javascriptjqueryhtmlcss

Exploring the Sidebar Navigation Features of Bootstrap 4

Looking to incorporate a vertical navigation menu on the left side of my webpage, extending the full height of the page. My attempt to achieve this using the Bootstrap grid system resulted in the navigation menu becoming too wide. This issue persisted eve ...

htmlcsstwitter-bootstrap

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...

jquerycsshtmlrel

Utilize jQuery's each loop to individually choose objects

I've been attempting to assign a variable to uniquely represent an audio object for each class using the following code snippet: var x0 = new Audio('1.wav'); var x1 = new Audio('2.wav'); $('.class').each(function(i) { ...

javascriptjqueryhtmlhtml5-audio

SELENIUM is unable to choose a name that is generated by JavaScript code

Hello, this is the HTML code I am trying to work with: <input type="text" name="input[220].pk[202].name['CODICE_ORDINE_OLO'].value" alias="" value="" pattern=".*" class="form-control form- ...

pythonhtmlselenium

Extracting the input's data and placing it into a table cell

Hey there! I am facing an issue where the data entered in the input fields is not getting transferred to the respective <td>. The text displayed in the (tabios) field should change according to what is entered in the input. Here's the code snipp ...

jqueryhtml

What steps can be taken to resolve the issue of the <td> element not being allowed as a child of an <a> tag?

https://i.stack.imgur.com/nsdA7.png How can I address these warnings? I utilized the material UI table component and suspect that the warnings are originating from component={Link} to={/patient/${patient.id}} <TableContainer className={styles.tableCo ...

javascriptcssreactjshtml-tablematerial-ui

Automatically omitting a selector that mimics a switch

After conducting thorough research, I discovered a variety of solutions using jQuery and Vanilla. While one answer perfectly addressed my issue, it failed to integrate effectively with the rest of my code. So, I decided to modify the code from this Stack O ...

javascripthtmlcss

I encountered the issue: "The specified resource is not a valid image for /public/logoicon/logoOrange.png, it was received as text/html; charset=utf-8."

I encountered an issue when trying to incorporate a PNG or SVG file into my code. What steps should I take to correct this error and enable the images to display properly? import Head from 'next/head' import Image from 'next/image' impo ...

javascripthtmlcssbrowsernext.js

Concealing a DIV element when the value is not applicable

I'm currently working on a website for a coffee shop product. On this site, each product has a coffee strength indicator that is determined by the database. The strength can be categorized as Strong, Medium, Weak, or n/a (for non-coffee products). If ...

javascriptjqueryhtml

A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...

htmlcssbootstrap-5

Sending a request to the Github API using HTTP

Currently I am working on a project to create a web application using C# that can search for users with Github accounts. However, I am unsure where to begin as I prefer not to use frameworks like Octokit and want everything done in C#. Could someone provi ...

c#htmlasp.netgithub

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

cssreactjsnext.js

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

Why are XAxis categories appearing as undefined in tooltip when clicked?

[When clicking on the x-axis, the values go from 0 to 1. I need the x-axis categories values to display on click event. When hovering over the x-axis value, it shows properly, but clicking on the x-axis does not show the correct values] Check out this fid ...

javascriptjquerycsshighcharts

Name of Document (changing from php to ?)

Greetings! Currently, I am utilizing PHP to include the document name as an example. folder/<?phpecho basename(__FILE__, '.' . pathinfo(__FILE__, PATHINFO_EXTENSION));?>_button.png I have observed that using PHP for this purpose and havin ...

phpjavascriptjqueryhtml