Is there a way to eliminate a style from the final element of a list?

I have just completed a project that looks similar to this:


I am wondering if there is a way to remove the line at the end of the last column? (it's within a PHP while loop)

Here is the code snippet:

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">
            <div name="gameicon" style="width: 16px; margin-left: 5px; float: left;">
                <img src="images/games/<?php echo $games['short']; ?>.gif" alt="ICON" />
            </div>
            <div id="game" style="width: 115px; margin-left: 5px; float: left; text-align: right;">
                <b><?php echo $games['game']; ?></b>
            </div>
            <div style="float: left; margin-left: 15px;">
                <?php echo $signs_count; ?>
            </div>
            <div style="float: left; margin-left: 3px; margin-right: 3px;">/</div>
            <div style="float: left; color: <?php echo $site_color; ?>;">
                <b><?php echo $signs_count_paid; ?></b>
            </div>
            <div class="clearer"></div>
        </div>
cssheight

Answer №1

Oops! It seems I replied before you added your code. My previous response still holds true, but you may need to adjust your HTML structure by placing the divs within an unordered list.

You might want to consider using:

li:last-child div
{
    border-bottom: 0;
}

Keep in mind that some browsers do not fully support the last-child selector (such as IE7). The first-child selector has better compatibility. An alternative approach could be adding the bottom border initially and then removing it from the top using:

li:first-child div
{
    border-top: 0;
}

Alternatively, you could utilize jQuery to dynamically modify the CSS and ensure cross-browser compatibility:

$('#yourUL > li:last-child > div').css('border-bottom','0');

Answer №2

What if you modify your code, adjusting the first line to be: 

<div class="mainDiv">

CSS: 

.mainDiv { 
    border-top: 1px solid #cdcdcd; 
    margin-right: 10px; 
    margin-top: 5px;
    padding-top: 5px; 
    font-size: 10px;
}

.mainDiv:first-child { 
    border: 0;
}

Hopefully this modification proves to be beneficial for you.

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

Utilizes an external CSS font file for eBay advertisement

After researching numerous answers, I am still unable to identify what I may be doing wrong. I have designed a collection of custom fonts using iconmoon, and after downloading the css and font files, I uploaded them to a directory on my website. I am attem ...

htmlcssfonts

Issue with Inline JavaScript in `href` tag not functioning correctly in Firefox

I am encountering an issue with this inline JavaScript not working in Firefox. I need to figure out how to make it function correctly in Firefox. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> ...

javascripthtmlcssfirefox

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexb ...

cssflexbox

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

htmlcsslinecell

Setting the background color in the navbar of a Laravel application

I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...

csslaravelcolorsbackground-color

Guidelines for creating a uniform table border with varying border thicknesses

I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image. Here is the general structure of my code: #cross ...

css

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...

htmlcssbootstrap-4

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

jqueryhtmlcsscross-browser

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

I've been struggling as a novice programmer, and even with the help of more experienced programmers, we haven't been able to figure it out. I'm trying to integrate a search box into the top navigation that adjusts responsively to different ...

javascriptjqueryhtmlcsswordpress

Is it possible for the ImageListItem Img to occupy the entire Card Space?

I am faced with the challenge of making an ImageListItem occupy all available space within a card. The goal is to have a rounded Card with an image background and a text bar at the bottom. However, I am struggling to get the ImageListItem to expand beyond ...

cssreactjsmaterial-uireact-component

How can I align the kendoMenu in the center when the menu width is unpredictable?

Presenting a modified menu structure: <html class="k-webkit k-webkit40"> <head> <title>Site Title</title> <!-- js and css files referenced here --> </head> <body> <link h ...

jquerycsskendo-menu

Keeping everything aligned, my aim is to position the search bar and the logo side by side on the left-hand side and stretch the search bar all the way to the end

Looking to adjust the placement of the logo and search bar on the left side while extending the search bar further to the right. Struggling to get the desired layout? No worries, we've got you covered! Also need a join and log in button aligned to the ...

htmlcss

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

htmlcssdisplaymousehover

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

csstwitter-bootstrapnavbar

What could be causing my video not to display a thumbnail on mobile devices until it is played?

When I view my website on mobile devices, there is no background image displayed before playing a video. Below is the HTML code I am using: <div class="row " > <div class="col-12 text-center"> <video control ...

htmlcssbootstrap-4

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery. Unfortunately, my knowledge of jQuery is ...

javascriptjqueryhtmlcss

Disabling the Entire Page Using Jquery

I've got this cool ajax function function do_ajax_request(t){ var form = $('#edit_'+t); var loadingDiv = $('#loading_'+t); $.ajax({ url: form.attr("action"), type: "POST", data: form.serialize(), cach ...

javascriptcssjquery-uijquery

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

htmlcssanimationslider

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

htmlcssresponsiveelement

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss