CODEWITHSUNDEEP
csscss-selectors
Tom
Tom

Reputation: 12998

CSS3 not selector with last-child

I have the following css which needs to alter the last-child which does not have the class "myClass" but I can't seem to get it to work.

Any ideas where I'm going wrong?

ul li:not(.myClass):last-child a {
    font-style:italic;
}

Example html as requested:

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li class="myClass"><a href="#">Extra</a></li>
</ul>

I want to apply the css to li three...

Upvotes: 4

Views: 411

Answers (5)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Try something like this:

ul li:not(.myClass):nth-last-of-type(2) a {
    border-right:0px solid #000;
}

SEE DEMO

Upvotes: 0

Ghassan Elias
Ghassan Elias

Reputation: 2233

this can't be done with css only if you are capable to use jQuery you might find this solution helpful.

http://jsfiddle.net/6ku3Y/

$('ul li').not('.myClass').last().find('a').addClass('mystyle');​

Upvotes: 2

user1464296
user1464296

Reputation:

Current CSS syntax is not capable of facilating an AND operator to perform this kind of style. What you need is the CSS LESS Framework.

This will allow you to do this:

ul > li:not(.myClass) {
  li:last-child {
    //style here
    }
}

Upvotes: 0

Giona
Giona

Reputation: 21114

If you're sure the element you want to target is the last but one, you can use nth-last-child(2)

ul li:nth-last-child(2) a {
    border-right:0px solid #000;
}

Upvotes: 1

gearsdigital
gearsdigital

Reputation: 14205

If you want to apply the css only to li three, Try :nth-child(3)

ul li:nth-child(3) a​ {
    border-right:0
}​

http://jsfiddle.net/hhncn/

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. – http://reference.sitepoint.com/css/pseudoclass-nthchild

Upvotes: 0

Related Questions