CSS3 Selector Last Element That Is Not of Class X

CSS3 selector last element that is not of class X

This is not possible via CSS Selectors currently.

The desired behavior is only specified in CSS Selectors level 4, the one you could need is :not(.X):nth-last-match(1, .Y), but currently no browser supports it.

So, the best solution is to use jQuery as @BoltClock wrote in a comment or to generate the desired class in the html.

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>

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 */ }

How to select the last element within an element regardless of type in CSS?

Use this:

section > *:last-child {
    // your custom css styles
}

Explanation:

This works because when you use:

> it select the immediate children

* this selects all the the elements

nth-child ensures that all the immediate children will be targetted (if you use nth-of-type that is not the case.

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>

CSS: How to say .class:last-of-type [classes, not elements!]

Unfortunately finding the last .class is not possible with last-of-type.

Edit:
To actually add something constructive to this answer, you could fallback to JavaScript to locate this selector, or revise your markup/CSS. Whilst I have found myself in the situation that last-of-type for a class selector would be useful, it's nothing that cannot be worked around with a little more thought.

CSS Selector For Last Element With Class Within Element With Class

The CSS selector I was trying actually works. The HTML is produced using some C# extension methods and I hadn't realised all the inputs were being wrapped in a .form-group div. The CSS selector would have seen that as the last-of-type for the .well. Once I removed this div the selector worked.

.well .form-group:last-of-type {
    margin-bottom: 0!important;
}

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

Typically you add a class selector to the :not() pseudo-class like so:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

But if you need better browser support (IE8 and older don't support :not()), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.

Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable, or otherwise affect them one way or another. For example, although display is not inherited, setting display: none on a :not(.printable) will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.

---

Related Topics