Tips on eliminating the bottom border of the final div within a group using CSS

Is there a way to remove the bottom border of the last "footer_column" div? See below for the HTML:

<div id="footer_wrapper"> <!-- footer_wrapper starts here -->
    <div id="footer"> <!-- footer starts here -->
    <div class="footer_column">
        <h4>Digital Strategy</h4>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Search</h4>
        <ul>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Google AdWords</a></li>
            <li><a href="#">Bing Ads</a></li>
            <li><a href="#">Remarketing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Social</h4>
        <ul>
            <li><a href="#">Facebook Ads</a></li>
            <li><a href="#">Youtube Ads</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Conversion</h4>
        <ul>
            <li><a href="#">Landing Page Creation</a></li>
            <li><a href="#">A/B Testing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Contact Us</h4>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014.</p>
        </div>

    </div> <!-- footer ends here -->
</div> <!-- footer_wrapper ends here -->

Here is the CSS:

/* footer */
.footer_column
{
    float:none;
    width:100%;
    margin-bottom:5%;
    padding-bottom:10px;
    border-bottom:1px solid #8f8f8f;
}

.footer_column:last-child
{
    border-bottom:none;
}

The above code doesn't seem to be working as expected. Even after specifying ".footer_column:last-child", the last div still displays a bottom border. While I could use ":first-child" and "border-top" to achieve the desired result, I am specifically looking for a solution using "border-bottom" and "last-child". Any help would be greatly appreciated.

htmlcss

Answer №1

To simplify, you have two options:

  1. Create a new class called .footer-last-child and delete the border:

    .footer-last-child { border-bottom:none;}

Then, apply this new class to the last child element:

<div class="footer_column footer-last-child">

OR -

  1. Add an ID to the last item and remove the border: #last-child{border-bottom:none;}

Update your HTML accordingly:

<div class="footer_column" id="last-child">

Answer №2

@LcSalazar is absolutely correct, the last-child selector specifically targets the last child within an element, and not necessarily the last one among a set of .footer_columns as you may have assumed. Therefore, your styling for last-child will only be applied if there are no elements following it.

An effective solution would involve enclosing all the .footer_columns within a designated container like this:

<div id="footer_wrapper"> <!-- Start of footer_wrapper -->
    <div id="footer"> <!-- Start of footer -->
    <div class="footer_column_container">
        <div class="footer_column">
            <h4>Digital Strategy</h4>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Search</h4>
            <ul>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Google AdWords</a></li>
                <li><a href="#">Bing Ads</a></li>
                <li><a href="#">Remarketing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Social</h4>
            <ul>
                <li><a href="#">Facebook Ads</a></li>
                <li><a href="#">Youtube Ads</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Conversion</h4>
            <ul>
                <li><a href="#">Landing Page Creation</a></li>
                <li><a href="#">A/B Testing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Contact Us</h4>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014. All Rights Reserved. eCLICKS New Zealand - eCLICKS United Arab Emirates.</p>
        </div>

    </div> <!-- End of footer -->
</div> <!-- End of footer_wrapper -->

Answer №3

The reason it's not working is because the element you are trying to select is not actually the last child within its parent. In this scenario, the last child would be the div with the class copyright.

Additionally, there isn't a selector for targeting the last of a specific class. You can read more about this on Stack Overflow: CSS: How to say .class:last-of-type [classes, not elements!]

One approach could be to target the specific child using :nth-child:

.footer_column:nth-child(5) {
    border-bottom:none;
}

However, keep in mind that this approach relies on having a constant number of divs.

Answer №4

Your footer_column DIV is not positioned as the last child in the hierarchy. The copyright DIV holds that position currently.

To rectify this issue, consider relocating the copyright and clr DIVs outside of the footer container.

Please note that there is no current CSS selector available to target the final element with a specific class within a designated container.

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

What is the process for building an interactive quiz using JavaScript?

In the process of creating a quiz, I envision a user interface that presents questions in a "card" format. These questions will include simple yes/no inquiries and some multiple-choice options. As the user progresses through the quiz, their answers will de ...

javascripthtmlvue.js

Prevent pinch zoom in webkit (or electron)

Is there a way to prevent pinch zoom in an electron app? I've tried different methods, such as using event.preventDefault() on touchmove/mousemove events in JavaScript, adding meta viewport tags in HTML, adjusting -webkit-text-size-adjust in CSS, and ...

javascripthtmlcsswebkitelectron

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

This question may seem simple, but I have been searching for an answer and haven't found one yet. Imagine we have an HTML element with dimensions specified in pixels: <div style="width:750px; height: 250px"></div> We can easily resize i ...

javascripthtmlcss

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

Dealing with 'this' while using an addEventListener

I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...

javascripthtmlthisaddeventlistener

Show only child elements of a specific type within the parent div

Looking to identify divs with the class 'test' that contain only buttons in their child nodes. This is the HTML code that needs to be filtered. <div class="test"> <div> <button> <span>Button 1</span></butto ...

javascriptjqueryhtmljquery-selectors

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

jquerycssimageoptimization

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

javascriptcssreactjsresponsive-designtailwind-css

PrimeNG - Sticky header feature malfunctioning in the p-table

Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...

htmlcssangularprimeng

What is the method to ensure that flexbox takes into account padding when making calculations?

There are two sets of rows displayed below. The first row contains two items with a flex value of 1 and one item with a flex value of 2. The second row contains two items with a flex value of 1. As per the specification, 1A + 1B = 2A However, when ...

htmlcssflexbox

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

Recently, I encountered a unique situation in Chrome where an odd combination of styles led to an issue. To help illustrate the problem, I created a fiddle which can be viewed here: http://jsfiddle.net/C3CbF/1/ This particular issue is only visible if you ...

cssgoogle-chrome

Background images in Google Chrome browser only become visible after I manually modify the element's CSS using the inspect tool

The issue I'm facing is with the Google Chrome browser not displaying background images unless I inspect the element's CSS using the inspecting tool. I have an anchor tag set with the following properties: display: block; float: left; width: 2 ...

htmlcssgoogle-chromebackground-image

Customizing error messages to display validation errors instead of default text errors in the Django UserCreationForm

I'm encountering an issue with the registration form on my website. The form itself is straightforward, but I'm facing a problem where if a username is already taken or if the two password fields don't match, Django doesn't respond afte ...

pythonhtmlcssdjango

What's the best way to include a div on the right side of my adaptable divs?

I need the "div 1" label to always appear on the right side of the divs, while still maintaining responsiveness. Is there a way to achieve this effectively? Struggling to find a wrapper that meets my responsiveness requirements. #wrapper { width: aut ...

htmlcss

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

htmlcss

Customizing the Twitter bootstrap navigation in Wordpress

I've been working on theming my navigation menu using Twitter Bootstrap. I want it to resemble the demo example of a fixed top banner, which can be seen here: http://getbootstrap.com/examples/navbar-fixed-top/ Although I have managed to get it to wor ...

phpjquerycsswordpresstwitter-bootstrap

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

javascripthtmltypescriptloopsoop

positioning a div element in front of a centered div

Is it feasible to position a div element directly preceding a centered element? The aim is for the centered div element to align with the div element above. I am seeking to achieve the layout illustrated in the following diagram: -------- ...

htmlcss

Why have the bars been positioned on the left instead of the right, and why does the mobile version require sliding instead of simply accessing the menu through a function?

Hello everyone, I'm currently working on designing a mobile-friendly header menu with the bars positioned on the right side of the screen. The goal is to utilize JavaScript to allow users to click either an 'X' icon or the bars to open the m ...

javascripthtmlcssfirefoxmenu