CODEWITHSUNDEEP
csscss-selectors
dcastro
dcastro

Reputation: 68670

Combining :last-child with :not(.class) selector in CSS

Is it possible to choose the last child that does NOT have a class attr? Like such:

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

I want to select the third row, in this case.

I tried the following, which did not work:

tr:not(.table_vert_controls):last-child

Thanks in advance.

Upvotes: 50

Views: 34279

Answers (3)

Mor Bargig
Mor Bargig

Reputation: 363

my case was to find the last th\td without class "hidden-cell" inside the tr only this code works for me

        tr {
          td:nth-last-child(-n + 1 of td:not(.hidden-cell)),
          th:nth-last-child(-n + 1 of th:not(.hidden-cell)) {
            /** any style you need */
            background-color: red !important;
            border-width: 20px !important;
            max-width: 20px !important;
            width: 20px !important;
            min-width: 20px !important;
          }
        }

in you case lets say

   tbody {
          tr:nth-last-child(-n + 1 of tr:not(.table_vert_controls)){
            /** any style you need */
            background-color: red !important;
            border-width: 20px !important;
            max-width: 20px !important;
            width: 20px !important;
            min-width: 20px !important;
          }
        }

Upvotes: 0

user3882055
user3882055

Reputation: 9

You can use the following solution:

tr:not(.table_vert_controls):nth-last-of-type(2)

Upvotes: -2

BoltClock
BoltClock

Reputation: 723739

Not with CSS selectors alone, no, as :last-child specifically looks at the last child, and there isn't a similar :last-of-class pseudo-class. See my answer to this related question.

As of late 2015, implementations have begun slowly trickling in for Selectors 4's extension to :nth-child() and :nth-last-child() which allow you to pass an arbitrary selector as an argument (more on that also in an update to the linked answer). You will then be able to write the following:

tr:nth-last-child(1 of :not(.table_vert_controls))

Although implementations have recently begun to ship, it will still take at least a few more years for this to be widely supported (as of April 2018, two and a half years after being the first browser to ship, Safari remains the only browser to have done so). In the meantime, you'll have to use something else, like an extra class just before the class in question, or a jQuery selector:

$('tr:not(.table_vert_controls):last')

Upvotes: 44

Related Questions