What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom:

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <tr class="table-top"><th style="width:40px;">ID</th> <th>Post title</th> <th>Date</th> <th>Owner</th> <th style="width:100px;">Actions</th></tr>
    <tr class="table-middle"><td>1</td> <td>Test</td> <td>16.7.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-middle"><td>2</td> <td>Test 2</td> <td>3.8.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-bottom"><td colspan="5"></td></tr>
</table>

.table tr th {
color:#929191;
font-weight:bold;
font-size:14px;
text-align:left;
padding-left:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr th:last-child {
border-right:none;
}
.table tr td {
color:#929191;
font-weight:bold;
font-size:12px;
padding:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr td:last-child {
border-right:none;
}
.table .table-middle:last-of-type td {
border-bottom:none;
background:red;
}
.table tr.table-middle td:first-child {
text-align:center;
}
.table tr th:first-child {
text-align:center;
padding-left:0px;
}
.table tr.table-bottom td {
border-right:none;
border-bottom:none;
}

Unfortunately, the 

.table .table-middle:last-of-type td
selector does not seem to be working properly.

Feel free to check out the Fiddle for reference.

Any suggestions on how to fix this issue?

htmlcsscss-selectors

Answer №1

Simply put: Changing the HTML structure is necessary as CSS alone cannot achieve this.

Further explanation:

:last-of-type pseudo-class targets the last sibling of a specific type within its parent element's list of children.

Consider using the selector: .table-middle:last-of-type.

Although the .table-middle selector may correctly target the element, it does not represent the last sibling of its particular type, as the term refers to the HTML element itself rather than the combination of element.class.

Here is an effective solution:

HTML Structure

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <thead>
        <tr>
            <th style="width:40px;">ID</th>
            <th>Post title</th>
            <th>Date</th>
            <th>Owner</th>
            <th style="width:100px;">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test</td>
            <td>16.7.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>3.8.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>        
    </tbody>
</table>

CSS Styling

.table tbody tr:last-child td {
    border-bottom:none;
    background:red;
}

Access the working demo on Fiddle

Answer №2

You can simplify it even further by eliminating the use of classes entirely:

HTML:

<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

CSS:

table {
    width: 500px;
}
table td { /* style for all cells excluding top and bottom rows */
    background: red;
}
table tr:first-child td { /* style for cells in the top row */
    background: green;
}
table tr:last-child td { /* style for cells in the bottom row */
    background: blue;
}
table tr:first-child td:first-child, /* first row, first cell */
table tr:first-child td:last-child, /* first row, last cell */
table tr:last-child td:first-child, /* last row, first cell */
table tr:last-child td:last-child { /* last row, last cell */
    background: yellow;
}

See the interactive JSFiddle demonstration.

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

Retrieve content inside an iframe within the parent container

Hey there! I've been working on adding several iframes to my webpage. Each iframe contains only one value, and I'm trying to retrieve that value from the parent page. Despite exploring various solutions on Stack Overflow, none of them seem to be ...

javascripthtmliframeinnertext

Initiate keyframe animation after completion of the transition (CSS)

Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...

css

Encountered an issue with instafeed.js due to CORS policy restrictions

Trying to implement an API that provides JSON data for use in a function. Required Imports: Importing Jquery, instafeed.min.js, and the API (instant-tokens.com). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js& ...

javascripthtmljsonajaxinstagram-api

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template. Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks goo ...

htmlcsstwitter-bootstrap

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form: This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> <label class="control-label ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Modify the color of text in Bootstrap navigation bar

I am struggling to adjust the text color within my bootstrap links. I attempted the method mentioned in this post, but unfortunately it did not work for me. Can someone please guide me on how to successfully change the text color? Thank you. You can view t ...

csstwitter-bootstrapbootstrap-4

Express is causing an issue with the AngularJS loading process

When I view the index.html file in a browser, everything works fine. However, when I try to run it on a local server using Express, it doesn't work as expected. Server.js const express = require('express'); const app = express(); app.get ...

htmlangularjsnode.jsexpress

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

Tips for creating a full screen div layout with fixed top and bottom navigation bars

Can someone help me achieve the following layout style? +-----------------------------------------------------------+ | Top Sticky Nav | +--------------------------------------------------------+--+ | ...

htmlcssbootstrap-4

Easy Steps to Align a Rotated Table Header

I am looking to rotate the header table using CSS while keeping all text together. Here is my CSS code: th.rotate { height: 100px; white-space: nowrap; } th.rotate>div { transform: rotate(-90deg); } Here is how I have applied this CSS: ...

htmlcss

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Is it causing issues having the same version of jQuery included multiple times?

Within my HTML file, referred to as x.html, I've included other HTML files as well. In x.html, I have integrated the jquery library version 1.4.1. It seems that this same version of jquery is also being included from the other HTML files. Even though ...

javascriptjqueryhtml

multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...

csshtml

Strategies for creating smooth transitions for elements using CSS transformations

Is there a way to smoothly fade in edits to elements in CSS when hovered over? I am looking to change the border from solid to dotted, but want the transition to be gradual. How can this be achieved? UPDATE: To provide more context, here is the current c ...

htmlcsscss-transitions

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Should I utilize a single form or one for each table row in asp.net mvc?

While working on a project, I caught myself in a coding dilemma: <table> <tr> <th>Code</th> <th>Enabled</th> <th>Percentage</th> <th>Amount</th> <th>Start&l ...

htmlasp.net-mvcstandards

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...

jqueryhtmlcsstwitter-bootstrapcarousel

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...

javascripthtml

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Tips for using Jquery to retrieve HTML from external sources

I have successfully managed to display an internal webpage on my HTML, as shown below: <!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.4.4.js"></script> </head> <body> & ...

jqueryhtmlget