CSS Get Last-Child That Doesn't Have a Class

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

Select :first-child or :last-child that doesn't contain some specific class

As mentioned, this is not possible with CSS selectors. The reason is twofold:

• :first-child and :last-child represent the first and last children of their parents, period. They do not represent the first and last child elements matching the rest of the selector. Chaining :not(.hide) simply tells the selector to ignore the element if it has the .hide class; it does not change the meaning of the rest of the selector.

• There is currently no other pseudo-class available for the first or last (or nth) element matching an arbitrary selector.

Since you're already using jQuery to apply the .hide class, you can use it to apply another class to the first and last elements matching :not(.hide), then target those additional classes in your CSS.

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>

I need to select (not last child) only if it has a specific class

Instead of applying padding-right to everything except the last one, you can apply padding-left to everything except the first one. This will make your code much more intuitive and simple to read.

Check this out:

 a[class^=action--] + a {
     padding-left: 5px;
 }

 a[class^=action--] + a {     padding-left: 5px; }

<table>    <tr>        <td><img src="http://via.placeholder.com/350x150" height="40" width="40" /></td>        <td>Triple monochromator for Raman</td>        <td>            <a href="i"><img src="http://via.placeholder.com/24x24"/></a>        </td>        <td>            <a class="action--edit"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>            <a class="action--delete"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>            <a class="action--view"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>        </td>    </tr></table>

How can I select the last element with a specific class, not last child inside of parent?

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

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 last-child with :not selector

This isn't possible with just css selectors. You could use jQuery though.

Demo

$('ul:not(.disabled):last').css('border-right', '1px solid black');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul class="column">  <li>test</li></ul><ul class="column">  <li>test</li></ul><ul class="column disabled">  <li>test</li></ul>

Doesn't CSS first-child or last-child work with class wise?

As others have mentioned, :first-child is working as expected, as the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {    color:#F00;}div.red:last-of-type {    color:#00F;}p.blue:first-of-type {    color:#F00;}p.blue:last-of-type {    color:#00F; }

<div>    <div class="red">one</div>    <div class="red">two</div>    <div class="red">three</div>    <p class="blue">one</p>    <p class="blue">two</p>    <p class="blue">three</p></div>

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

---

Related Topics