CSS Targetting The Last of a Class Type That Isn't The Last-Child

CSS targetting the last of a class type that isn't the last-child

I don't believe there is a way to do that without using JS.

The closest you can get is to target the 3rd item with:

.row div:nth-child(3) {
    background: chucknorris;
}

You can include a qualifier to only target the third child if it is .red like so:

.red:nth-child(3) {  
   background: chucknorris; 
}

http://jsfiddle.net/s76J3/3/

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

:last-child not working as expected?

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */  font-weight: bold;}
.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/  background: crimson;}
.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/  color: beige;}

<div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child-2'>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <p>Child w/o class</p></div>

How can I select the last-child of the last-child?

You can use .block div:last-child div:last-child

.block div:last-child div:last-child{  background-color:yellow;}

<div class="block">  <div>not</div>  <div>not</div>  <div>not</div>  <div>    <div>not</div>    <div>not</div>    <div>this one</div>  </div></div>

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

Using :last-child with class selector

Your statement was: "I want to style the last/second .heading."

That would mean that you would have to write your code like this:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

And the CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

Else, with your current html-code, you would write:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

I understand your thought, but the lis with the class "heading" isn't the second or last child.

How to target all elements, except last one with css?

If you number of levels inside .outer is known (or limited) you can extend selector like this:

.outer > * > a,.outer > a:not(:last-of-type) {    color: red;}

<div class="outer">  <a href="#">First</a>  <a href="#">Second</a>  <div>    <a href="#">Third</a>  </div>  <a href="#">Fourth</a>  <a href="#">Fifth</a></div>

CSS nth-child select all but last element when length is unknown

Use :not(:last-child) to target all except the last.

http://jsfiddle.net/96nd71e3/1/

---

Related Topics