How do I select the “last child” with a specific c

问题:

<ul>
    <li class=\"list\">test1</li>
    <li class=\"list\">test2</li>
    <li class=\"list\">test3</li>
    <li>test4</li>
</ul>

How do I select the \"last child\" with the class name: list?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

I know the example above doesn\'t work, but is there anything similar to this that does work?

IMPORTANT:

a) I can\'t use ul li:nth-child(3), because it could happen that it\'s on the fourth or fifth place too.

b) No JavaScript.

Any help would be appreciated, thanks!

回答1:

I suggest that you take advantage of the fact that you can assign multiple classes to an element like so:

<ul>
    <li class=\"list\">test1</li>
    <li class=\"list\">test2</li>
    <li class=\"list last\">test3</li>
    <li>test4</li>
</ul>

The last element has the list class like its siblings but also has the last class which you can use to set any CSS property you want, like so:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}

回答2:

This can be done using an attribute selector.

[class~=\'list\']:last-of-type  {
    background: #000;
}

The class~ selects a specific whole word. This allows your list item to have multiple classes if need be, in various order. It\'ll still find the exact class \"list\" and apply the style to the last one.

See a working example here: http://codepen.io/chasebank/pen/ZYyeab

Read more on attribute selectors:

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

回答3:

You can use the adjacent sibling selector to achieve something similar, that might help.

.list-item.other-class + .list-item:not(.other-class)

Will effectively target the immediately following element after the last element with the class other-class.

Read more here: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

回答4:

This is a cheeky answer, but if you are constrained to CSS only and able to reverse your items in the DOM, it might be worth considering. It relies on the fact that while there is no selector for the last element of a specific class, it is actually possible to style the first. The trick is to then use flexbox to display the elements in reverse order.

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, \"unstyle\" elements which are not the first. */
ul > li.list ~ li.list {
  background-color: inherit;
}

<ul>
  <li class=\"list\">0</li>
  <li>1</li>
  <li class=\"list\">2</li>
</ul>
<ul>
  <li>0</li>
  <li class=\"list\">1</li>
  <li class=\"list\">2</li>
  <li>3</li>
</ul>

回答5:

I guess that the most correct answer is: Use :nth-child (or, in this specific case, its counterpart :nth-last-child). Most only know this selector by its first argument to grab a range of items based on a calculation with n, but it can also take a second argument \"of [any CSS selector]\".

Your scenario could be solved with this selector: li:nth-last-child(1 of .list)

But being technically correct doesn\'t mean you can use it, though, because this selector is as of now only implemented in Safari.

For further reading:

• https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
• http://caniuse.com/#search=nth-child

回答6:

You can\'t target the last instance of the class name in your list without JS.

However, you may not be entirely out-of-css-luck, depending on what you are wanting to achieve. For example, by using the next sibling selector, I have added a visual divider after the last of your .list elements here: http://jsbin.com/vejixisudo/edit?html,css,output

回答7:

There is a workaround (in specific situations) to this problem:

While this doesn\'t answer the question directly, there is a high probability this way of thinking achieves the same goal:

Lets say we went to hide all elements in the list that are lower than index 3

<ul>
    <li>test1</li>
    <li>test2</li>
    <li class=\"hide\">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

CSS

li{ display:none; }
li.hide ~ li{ display:block; }

Live Demo

This will get rid of the need to add a hide class to all elements which needs to be hidden, so we are left with just one class, hide, which rules them all. now, you don\'t need to use the last-of-type which cannot work with Class names. you must re-think your approach of classifying things

回答8:

Use this selector: ul > li:last-of-type . This will select every last list item (<li>) in an unordered list (<ul>).

Breakdown of the answer: I\'m selecting only the child (>) of an unordered list (<ul>) that is the last child of its type (<li>) from the parent element (<ul>).

You can use an Id or class to restrict the selector to certain unordered lists. For example: ul.my-class > li:last-of-type will choose the last <li> only from the unordered lists of that class

回答9:

$(\'.class\')[$(this).length - 1] 

or

$( \"p\" ).last().addClass( \"selected\" );