Селектор брата CSS

Я должен сказать, что у меня нет IE 7 или 8, но я тестировал его с помощью эмулятора IE.

вот пример того, что вам нужно: http://jsfiddle.net/fatgamer85/ffVW3/

У вас есть элемент div с id- component-1 и внутри него несколько divs с повторяющимися классами component-2, component-3 and component-4

Вы можете индивидуально стилизовать эти элементы, используя классы, как в примере. трюк просто изменить цвет фона для первого div (или любого div) заключается в том, чтобы узнать уровень div, который вам нужно изменить, и применить к нему CSS Pseudo class (MDN) (W3S) (CSSTricks).

Это довольно просто. Следующий код: (1)

.component-2 {
    background: red;
}

применяет все элементы с классом- component-2 с красным фоном.

и следующий код: (2)

.component-4{
    background: pink;
}

применяет все элементы с классом- component-4 с розовым фоном. Согласно вашему коду, другим способом написания вышеуказанного кода будет: (3)

.component-2 .component-4{
    background: pink;
}

применяет все элементы с классом- component-4 в component-2 с розовым фоном.

Мы знаем, что в вашем коде есть несколько классов component-2, component-3 и component-4.

Следуя иерархии, #component-1 имеет несколько component-2 которых есть component-3 которого есть component-4 поэтому, если мы опускаем #component-1 у нас есть 3 divs с классами- component-2 на одном уровне иерархии.

Pseudo Selector имеет селектора для различных случаев (первый ребенок, последний ребенок, n-й, четный, нечетный и т.д.). Для вашего кода вы знаете, что вам нужно изменить цвет первого элемента.

поэтому, чтобы изменить цвет первого component-4, нам нужно пройти вверх по дереву, чтобы найти повторяющийся узел. который в этом случае является component-2. Правильный способ выбора этого элемента для добавления правил css с использованием псевдо класса - это (4)

.component-2:first-child{
    /* css rules here */
}

теперь, когда мы знаем, что все, что написано на стороне этого контейнера, применяется к первому div из класса- component-2, позволяет применить этот селектор класса к одному из вышеупомянутых селекторов, как указано в (3)

.component-2:first-child .component-4{
    /* css rules here */
}

Это правило указывает, что ТОЛЬКО первый div с дочерним component-2 класса component-2 с классом- component-4 должен иметь применимые к нему правила css.

Таким образом, сделав это, вы достигнете своего результата.

Вы можете поиграть, изменив псевдокласс на :last-child или :nth-child(2) чтобы увидеть различия, которые могут создавать псевдо-классы.

Я знаю, что это длинный пост для простого ответа, но я надеюсь, что вы узнаете что-то из этого.

ура!