"Troubleshooting: Why is :last-child not applying styles to my final

I'm encountering an issue in my example where the last doesn't display properly when using :last-child. In the provided code, you can observe that when I target the last element with the class "aa," it shows the "+ Add" text.

&.aa {}

However, when I comment out

&.aa{}

and replace it with

&:last-child{}

the "+ Add" text on the last

  • element is not appearing. Am I overlooking something here?

  • Answer №1

    Your HTML structure has a typo that needs to be fixed.

    Here is how your current structure looks:

    <ul>
      <li class="item">
        <div>
          Tom Hanks
          <br /> Jenny Hanks
        </div>
      </li>
      <li class="item active">
        <div>
          Henry Fonda
          <br /> Valarie White
        </div>
      </li>
      <li class="aa">
        &nbsp;
      </li>
    <ul>
    

    It seems that you didn't close the ul element properly, causing the last child to be ignored:

    <li class="aa">
       &nbsp;
    </li>
    

    This issue will prevent &:last-child from working as expected. Make sure to close your elements properly:

    Corrected structure:

    <ul>
      <!--> ul inner elements <-->
    </ul>
    

    Check out the live demo here: codepen.io

    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

    Enhance your Bootstrap navigation menu with eye-catching hover effects

    Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

    Can input be styled instead of using a textarea for design?

    Within the confines of a PDF's single-line display, I am in need of including text that does not contain new lines. While using an input instead of a textarea seems like the ideal choice, inputs do not naturally support line breaks and utilizing keydo ...

    How can I remove the bouncing effect of the top bar in Chrome when scrolling in Three

    There is a frustrating problem I am encountering on my website with the joystick control. Whenever I try to move my joystick down, Chrome triggers either the refresh dropdown or the top bar bounces and goes in and out of fullscreen mode. ...

    What is the best approach to transfer information from the client side to a node

    I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

    Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

    When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

    I am interested in implementing a feature that automatically saves form data when changes are made. My solution involves creating a dynamic form utilizing

    When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below i ...

    Enhance Bootstrap: adjust button width based on fluid text width

    Incorporating Bootstrap 5 framework, I have designed a card that showcases brand information along with a navigation button on the right side. https://i.sstatic.net/25QVr.png When the description is brief, the button aligns perfectly in a single line. Ho ...

    Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

    In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in ever ...

    The padding on the button inside the v-card is not being applied as expected

    I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

    Resizing a damaged HTML table to fit within a designated width using CSS

    Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

    Retrieve the value of a PHP array within a for loop and transfer it to JQuery

    *edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

    Centered Bootstrap 4 modal with responsive width

    Struggling to create a BootStrap 4 Modal that is centered in the screen and adjusts its width based on content? You're not alone. Despite trying different approaches like the container fluid and CSS methods, achieving a variable width modal is proving ...

    What causes a div to shift to the right when the margin-left is set to auto?

    I am curious to understand why setting the margin-left of the div with id="pink" to auto causes the div to move to the right side. Take a look at the image below: HTML <div id="aqua">aqua</div> <div id="yellow">yellow</div> & ...

    Using the CSS selector :contains() does not function properly when there are line breaks present

    <div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

    Each div will display the same image twice when loading the image

    I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

    Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

    I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

    issue with padding-bottom in Firefox and Internet Explorer 11

    JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

    Menu collapse button failing to Show content

    My navigation menu button is not functioning correctly. I am currently working on this project using CodePen, so Bootstrap is already integrated into the code. <div class="navbar-header"> <button type="button" class="btn navbar-toggl ...

    Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

    I am trying to highlight the menu item that is selected in a drop-down menu. I attempted the following code, which works if I prevent the default behavior of the link element, but I do not want to do that. So I tried using local storage instead, but it d ...

    Rotating 3D cube with CSS, adjusting height during transition

    I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...