Выбрать элемент на основе предыдущего элемента того же типа

Question

Я пытаюсь выбрать элементы на основе класса предыдущего элемента того же типа.

К примеру, учитывая следующий HTML, выберите третий поверочный элемент:

<div> 
    <span class="red"></span> 
    <span class="red"></span> 
    <p> 
    <span id="select me"></span> 
    </p> 
    <span id="don't select me"></span> 
</div> 

Я хочу, чтобы пядь элемент, чтобы иметь то же свойство, что и предыдущий элемент диапазона, поскольку он имеет класс, «красный».

Другой способ сказать это: выбрать элемент с классом «красный», а также следующий элемент того же типа, независимо от класса.

У меня тяжелое время, обертывающее мою голову вокруг этого. Лучше, чем ничто не было бы способом выбрать следующего родного брата того же типа, а не только любого следующего элемента. Например, span.red ~ span было бы в порядке, если бы это не означало "элемент span с ЛЮБЫМ предыдущим братом в классе с классом красного цвета".

Спасибо за любую помощь.

Вот еще примеры:

<div> 
    <span class="red"></span> 
    <span id="select me"></span> 
    <p> 
    <span class="red"></span> 
    </p> 
    <span id="select me"></span> 
</div> 

В приведенном выше примере, второй элемент диапазона выбран потому, что первый пролет имеет класс, «красный».

Последний элемент диапазона выбран потому, что третий пролет имеет класс «красный».

<div> 
    <span class="red"></span> 
    <span class="red"></span> 
    <p> 
    <b></b> 
    </p> 
    <span id="select me"></span> 
</div> 

Основная причина этого в том, что у меня есть элементы в редактируемом div. Они пронумерованы с помощью счетчика css. Некоторые элементы могут быть сгруппированы вместе как фигура, то есть 2a и 2b, а другие нет, поэтому я мог бы получить элементы 1, 2a, 2b, 2c, 3 и т. Д. Имя класса, которое я использую, просто говорит мне, что это «sub» и для увеличения счетчика sub, но не для счетчика основного элемента. Не имея класса для следующего элемента после того, как кучка субэлементов сообщает мне, что это последний вспомогательный элемент, и я должен сбросить счетчик sub. Причина, по которой я настроил этот способ, заключается в том, что я хочу, чтобы иметь возможность перемещаться по элементам и автоматически обновлять нумерацию. Кроме того, легко изменить, является ли что-то вспомогательным элементом, просто переключая имя класса.

Answer 1

В селекторе нет возможности сказать «родной брат того же типа». Но вы можете использовать селектор родственного после выбора по вашему выбору, и объединить их в один селектор, который соответствует вашим потребностям, например:

span.red + span, div.red + div 
{ 

} 

Answer 2

Я хотел бы иметь еще один случай или два, чтобы проверить это с , но это, кажется, работает для вашего примера:

span.red ~* span { 
    background: red; 
} 

jsFiddle example

Answer 3

Если это только вложенными на уровне вы могли бы попробовать это:

.red + * > span { 
    color: red; 
} 

Что такое прецедент для этого? Почему бы просто не добавить красный цвет ко всем элементам, которые вы хотите создать так же?