Combining :Last-Child With :Not(.Class) Selector in Css

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

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')

CSS Get last-child that doesn't have a class

Unfortunately what you want cannot be achieved using CSS only.

:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?

Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.

It is not even planned for selectors level 4 that you can specifiy a class or other limiting property.
See

https://www.w3.org/TR/selectors4/#the-last-child-pseudo

How to select last element that don't have specific class?

At the current moment, there is no CSS way of being able to find an element that is then followed by another specific element.

Possibly soon, there will be the CSS Relational Pseudo-class :has() which will make what you want possible. This is currently in the CSS Selectors Level 4 Draft and looks unlikely to be rolled out across any browsers any time soon.

A demo is below but don't expect it to work until the Selectors 4 Draft is at least in Working Draft.

Keep an eye on CanIUse to see when it becomes readily available.

ul li:has(+ .hidden:last-child),ul li:last-child:not(.hidden) {  background: red;}

<ul>  <li>    <button>1</button>  </li>  <li>    <button>2</button>  </li>  <li class="hidden">    <button>3</button>  </li></ul>

Combining :not() selectors in CSS

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class. As a jQuery selector, it works because jQuery extends its :not() functionality to allow any selector (like the .not() method).

However, your second syntax is one of the proposed enhancements to :not() in Selectors 4, and works equivalently to your first. Although the example (shown as of this writing anyway) shows a chain of :not() selectors, the proposal says:

The negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

Here a selector list is simply a comma-separated list of selectors.

If you need to negate selectors that contain combinators (>, +, ~, space, etc, for example div p), you can't use :not() in CSS; you'll have to go with the jQuery solution.

Global selector combined with :not(.class) doesn't seem to work

The problem here is that your code satisfies too many scenarios.

For example, the following will satisfy your rule.

<div>
  <label class="no-material">
    <span>
      <input name="no-3">
    </span>
  </label>
</div>

This is because the span is an element without that class that precedes an input.

What you could do is apply the rule you want to all inputs and then override the ones that have that class to be back to the original style.

For example:

main input {
  border: 1px solid blue;
}
main .no-material input {
  border: 1px solid black;
}

Combining :Last-Child With :Not(.Class) Selector in Css