Mastering the nth-child selector in css

How can I apply the :nth-child() selector to all elements in an HTML document except for the last one?

Is this code snippet valid? =

  td:nth-child:not(last-child){

    //Some css//
    }

I am using the text-overflow:ellipsis property to hide overflow from table cells within <td> elements.

I have successfully applied this effect to even and odd children of the <td> element. Now, I want to apply it to all <td> elements except the last child of the table.

I tried the following:

.table-condensed tbody tr  td:nth-child:not(last-child) a
 {
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    display: block;
    overflow: hidden;

}

However, this did not work as expected. Do you have any suggestions on how to achieve this effect?

htmlcsscss-selectors

Answer №1

Somewhat lengthy, but it gets the job done:

tr:not(:last-child) > td, tr:last-child > td:not(:last-child) {
    // add your styles here
}

Check out this fiddle

Answer №2

To target all cells except the last one in each row, simply include td:not(:last-child) in your selector.

Check out a similar example here.

I'm puzzled by the use of the bare :nth-child in your selector -- what exactly is the goal behind that?

Answer №3

To customize the CSS style of the final child element, you can use the following code snippet: 

td:last-child a {
   text-overflow: clip;
}

Answer №4

It appears you may be encountering an XY conundrum. While it's not possible to directly implement a style that targets all nth-child elements except the very last one, there is a workaround using two distinct styles:

.table-condensed tbody tr td a {
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    display: block;
    overflow: hidden;

}

.table-condensed tbody tr  td:last-child a {
    white-space: normal;
    text-overflow: clip;
}

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

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

javascriptcssanimation

Using HTML5 localStorage as a condition tool for dynamically changing CSS styles

Hello After spending a considerable amount of time trying to figure this out, I seem to be stuck. I believe I am following the correct steps, but for some reason, it's not working. Any advice or suggestions would be greatly appreciated. I am attempt ...

jquerycsshtmllocal-storage

The jQuery code continues to loop endlessly

My current script includes a fadeIn effect on a div when the user scrolls 200px from the top, along with custom circle animations. While it works, I admit it's not the most elegant solution as I had to piece together different scripts to make it funct ...

javascriptjqueryhtmlcss

Create a dynamic webpage that accepts user input, processes it using R code, and then displays the resulting output back on the webpage

I am in the process of creating a front end interface to showcase the results of my R code, which requires two files: master.csv and detail.csv. The master.csv file contains reference data with two columns, Commodity Category and Commodity Name, listed as ...

htmlrshinyknitrr-markdown

Convert the checkbox array to comma separated values when serializing the form

I am currently working on a form that includes a dropdown menu and checkboxes: <form id="filter_form"> <select name="type"> <option value="second">second</option> </select> <input type="checkbox" name="city[ ...

javascriptjqueryhtml

Loading logos dynamically using Jquery upon selection of an option

In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...

jqueryhtmlimageperformance

JQuery Searchbar Failing to Hide Divs as Intended

I'm currently facing an issue with my <user-panel> elements, which are dynamically created using ng-repeat. Each of these elements contains child divs with the class user-panel-name. I've been attempting to use the text within these name di ...

jqueryhtmlangular

The Bootstrap Carousel cannot be manually manipulated to switch images

I've run into an issue while trying to integrate a Bootstrap carousel gallery on my webpage. Although the photos automatically change after a few seconds, I am unable to manually switch them using the control buttons. Even after including Jquery, Po ...

htmlcarouselbootstrap-5

Social media icons condensed into a single line within a compact menu

I have come across a problem that I can't seem to solve. How can I display social icons in one line within a collapsed menu? I added the following code to my CSS file but nothing seems to have changed. Any suggestions or ideas would be greatly appreci ...

htmlcssbootstrap-4navbar

Struggling with transitioning from table layout to CSS, specifically encountering difficulty in aligning all elements properly

Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the ...

css

Replicate the cursor to make it show up twice

Is there a way to create a duplicate cursor effect on my website, making it appear twice and perhaps look like it's drunk? I want the cursor to still interact with images and change accordingly, but always have two visible. Can this be achieved easily ...

csscursordoublemouse

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

htmlreactjstypescriptaxioscomponents

What strategies can be implemented by web publishers to block Amazon Affiliate DEEP-LINKS from redirecting to the Amazon App?

Currently, I am utilizing the Amazon-India affiliate program as a way to generate income from my website. The issue arises when a visitor accesses my site using their mobile browser (specifically Google Chrome) and clicks on one of my affiliate links - ins ...

htmlgoogle-chromedeep-linking

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

javascriptjqueryhtmlcss

Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

I have a button on my home page that, when clicked, should open a specific tab section on another page. The button is located on one page and the tabs are on a different page. On the second page, I have multiple tabs but will only mention one here, which ...

javascriptjqueryhtmlcssajax

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

The overflow property is set to scroll in jQuery, causing continuous scrolling until reaching a certain point, at which it

Continuously adding new chat messages will show the latest one, but eventually it stops scrolling down automatically. How do I resolve this issue? Thank you. http://jsfiddle.net/VMcsU/ $("#button1").click(function(){ $("<div>").html("text").app ...

javascriptjqueryhtmlcss

If the option is not chosen, remove the requirement for it

I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...

javascriptjqueryhtmlcssforms

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss