The 'CSS border-radius targeting the last child element'

I am facing an issue with this code snippet:

tr:first-child th:last-child    {
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}
tr:first-child th:first-child   {
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
}
tr:last-child th:last-child {
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
}
tr:last-child th:first-child    {
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}

A similar styling has been applied to the <td> tags as well.

The intention behind this code is to create rounded corners for a table.

However, I have encountered a problem.

In one of the tables on my website, the last row contains hidden <td> elements. When a user clicks on the <th> line, these hidden <td> elements are revealed.

The CSS assumes that there is a <td> element in the last position of each <tr>, resulting in rounded corners. But since these specific <td> elements are hidden, it affects the appearance of the visible <th> elements in the same <tr>. This inconsistency in styling looks unappealing.

Any suggestions on how to resolve this issue?

htmlcsscss-tables

Answer №1

To target the second-to-last child, use the nth-last-child selector. This selects elements at intervals of r+x from the end. (:nth-last-child(r+n) or simply :nth-last-child(n) (assuming r is 0))

tr:nth-last-child(2) th:last-child {}

Answer №2

To select the last occurrence of a specific element type within its parent element, you can utilize the :last-of-type pseudo-class in CSS. For example, applying td:last-of-type will target the last table cell within a row.

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

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

javascriptjqueryhtmlcssbootstrap-4

Set the position of bootstrap column content to be fixed

I have a bootstrap row with two columns and some offset. I am trying to make the last column have a fixed position so that it remains visible even while scrolling. This last column contains image content. Although I tried using the affix class provided by ...

htmlcsstwitter-bootstrapresponsive-designcss-position

Is there a single function that can handle multiple sliders sharing identical options?

Currently, I am utilizing jQuery UI to generate 6 sliders with identical options for a survey. I am curious if there exists a method to merge all these sliders into one function while maintaining the ability to operate them individually? If such a soluti ...

jqueryhtmlcssjquery-ui

How to Apply CSS Class When Hovering in CSS

Is it possible for an HTML element to automatically inherit properties of a pre-written CSS class when I hover over it, without using Javascript? ...

htmlcsshover

CSS: Centralizing a Div Element with Fluid Width

I've created a popup that appears in the center of the screen using: transform: translate(-50%, -50%); and position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the c ...

htmlcss

Is it possible to incorporate a variable into an object?

If you are wondering whether it is possible to utilize a variable in the following scenario, the reason for my inquiry is connected to the potential of utilizing an input element to dynamically modify the variable: var str = "pineapples" var cost = { pine ...

javascripthtml

Your unique way of typing out your thoughts

This is an example of typing code using jQuery. How do I customize my own style? For example, I want to write a text like this: Hi. My <span style="text-decoration: underline;">name</span> is <span style="color: #ff0000;">Amir</span ...

javascriptjqueryhtmlcss

Tips for making a table header span multiple columns in HTML5

Could someone help me with making my HTML5 heading span across the columns in the table? I want the table to end on the far right with the vertical line appearing at the right end of the table. Any assistance would be greatly appreciated! For reference, ...

htmlcss

Styling various versions of a <button> using Styled Components

In my app, I have a basic colored button that needs to change its color depending on the UI state: const StyledButton = styled.button` & { border: 0; color: white; cursor: pointer; } &:hover { background-color: ${(props) => ...

cssreactjsstyled-componentscss-modules

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

css

Collapsed Grid System

Is it possible to create a CSS grid system that meets the following requirements: The grid should have arbitrary height (with consistent width) and when a grid overflows, it should stack vertically underneath the preceding grid, regardless of other grid ...

htmlcsscss-grid

Place content following a three.js display created within a <div id="mainWindow">

Recently, I created a small Three.js animation and embedded it in my HTML page like this: <div id="mainWindow" class="popup_block"> <!-- JavaScript for simulation --> <script src="../temp/webgl-debug.js"></script> <scri ...

javascripthtmlcssthree.js

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

javascripthtml

Is there a way for me to set up a confirmation pop-up alert before hitting the submit

I am interested in implementing a pop-up alert that asks "Are you sure you want to delete this comment?" when a user clicks on a button. How can I achieve this? $('button').on('click', function(){ // Display an alert to the user c ...

javascriptjqueryhtml

From JSON to HTML: A seamless transformation

Is there a way to convert a JSON object into HTML? I am currently making a get request that returns a JSON object with "_bodyText" as the key and the corresponding HTML string as its value. However, when trying to parse the JSON using JSON.parse(response), ...

javascripthtml

An error occurs when I attempt to run npm init

Error MODULE_NOT_FOUND When running npm init in the project folder, this error is displayed. View Image ...

javascripthtmlcssnode.jsbootstrap-4

Having issues with vertical space distribution in flexbox column layout

Is there a way to align vertical content with space-between without specifying the height? I want to justify-content-between the red and black divs in the third column without setting a height value. Can this be achieved considering we already have a max-h ...

htmlcssflexboxbootstrap-4

How to temporarily disable CSS hover effects

I have a menu with some links <ul id="nav"> <li> <a href="#">Project</a> <div class="subs"> <div> <ul> <li> <h3>Save</h3> <ul> <li> <a i ...

jquerycss

jQuery - restrict input field based on the value of a different selected field

Could anyone recommend a jQuery plugin that can achieve the following functionality? For example: <label><input type="checkbox" depends_on="foo=5" name="boo" ... /> Check </label> <select name="foo" ... > <option value="5" se ...

javascriptjqueryhtmlformsinput

Sliding through various background options

How can I change backgrounds on a slider without using .style.backgroundImage? Is there a way to do it by adding a class to the slider or some other method? 'use strict' let backgroundSlides = ['url(\'/images/slider/burger-back ...

javascripthtmlcss