CSS3 селектор последний элемент, который не относится к классу X

Question

Я пытаюсь стилизовать последний элемент класса Y, который не принадлежит классу X. Пример HTML:

<div class="container">
  <div class="Y"></div>
  <div class="Y"></div> <!-- this I want to style -->
  <div class="X Y"></div>
</div>

Я пробовал оба

.Y:not(.X):last-child

и

.Y:not(.X):last-of-type

но они не дают желаемого результата в хроме.Мне интересно, если это вообще можно сделать в CSS3 ...

Answer 1

В настоящее время это невозможно с помощью селекторов CSS.

Требуемое поведение только указано в CSS-селекторах уровня 4, вам может понадобиться :not(.X):nth-last-match(1, .Y), но в настоящее время ни один браузер не поддерживает его.

Итак, наилучшее решение - использовать jQuery, как написано в комментарии @BoltClock, или генерировать нужный класс в html.

Answer 2

Вы можете выбрать элемент напрямую, используя правило:

div.container > div:nth-child(2)

в противном случае, если вы знаете, что последний div.y всегда непрерывен до div.x.y, а затем идет конец родительского узла, вы можете выбрать его, используя правило:

div.container > div:nth-last-child( 2 )

Answer 3

вы можете попробовать

.Y:nth-last-child(-n+3) + :not(.X)
//or 
.Y:nth-last-child(-n+3) + div[class="Y"]

РЕДАКТИРОВАТЬ: Это будет работать со случайным числом элементов. Проверьте, что jsfiddle http://jsfiddle.net/brMWw/1/