Множественный выбор последнего ребенка

Question

Множественный выбор последнего ребенка

0

Я хотел бы выбрать следующие теги. Возможно ли это без изменения структуры HTML? DIV.first добавляются динамически, поэтому они могут меняться. Мне нужно .first.bb каждый последний .first.bb до .first.a и последний в #wrapper который уже сделан.

http://jsfiddle.net/MqPLx/

HTML

<div id="wrapper">
    <div class="first">first</div>
    <div class="first bb">first second</div>
    <div class="first bb">first second</div>
    <div class="first bb">first second</div> <!-- <- need to select this -->
    <div class="first a">first</div>
    <div class="first a">first</div>
    <div class="first a">first</div>
    <div class="first bb">first second</div>
    <div class="first bb">first second</div>
    <div class="first bb">first second</div>
    <div class="first bb">first second</div> <!-- <- need to select this -->
    <div class="first a">first</div>
    <div class="first a">first</div>
    <div class="first a">first</div>
    <div class="first bb">first second</div> <!-- <- need to select this -->
</div>

CSS

 .first.bb:last-child {
    color:red;
}

 .first.bb + .first.a {
        color:red;
}

user2537093 14 апр. 2014, в 04:52

Источник

0

К сожалению, согласно stackoverflow.com/questions/1817792/… и stackoverflow.com/questions/9742590/… Я не верю, что есть хороший ответ на это.
Daniel Paul 14 апр. 2014, в 03:17
0

Нет хорошего ответа только для CSS. Единственный реальный ответ - выбрать с помощью JavaScript, см. Ниже.
iamnotsam 14 апр. 2014, в 04:04

Теги:

html

css

css-selectors

1 ответ

Ещё вопросы

К сожалению, согласно stackoverflow.com/questions/1817792/… и stackoverflow.com/questions/9742590/… Я не верю, что есть хороший ответ на это.
Нет хорошего ответа только для CSS. Единственный реальный ответ - выбрать с помощью JavaScript, см. Ниже.

iamnotsam · Answer 1 · 2014-04-14T02-40-00.000Z

Предыдущий бит селектора sibling может быть выполнен только с помощью JavaScript во время запроса. См. Http://jsfiddle.net/iamnotsam/t4BUW/

// With jQuery
$('.bb + .a').prev().addClass('last-first-bb');

Или с простым JavaScript

// With just JavaScript
var elements = document.querySelectorAll('.bb + .a'),
    className = 'last-first-bb';

Array.prototype.forEach.call(elements, function(el, i){
  var el = el.previousElementSibling;
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
});

Это делает выбор для сложной части вашего вопроса. Выбор последнего дочернего элемента #wrapper с помощью CSS является тривиальным, поэтому для этого нам не нужны трюки.