Как применить CSS-стиль к определенному по счету дочернему тегу?

Наткнулся на одном форуме на интересующий вопрос, а именно, как применить стиль к тегу без индентификатора и класса, про кторый известно лишь его поядковый номер по отношению к конкретному дочернему тегу.
Если тема вам интересна, то можно для начала глянуть короткий урок на тему css-селекторов, а после этого глянуть на итоговый результат (под катом) с пониманием.

Исходное условие — набор вложенных тегов div:

<div class="some_class">
   <div></div>
   <div><!-- тег второго уровня вложенности -->
      <div></div><!-- а этот третьего -->
   </div>
   <div>
      <div>
         <div></div>
      </div>
   </div>
</div>

Современное (CSS3) решение с использованием псевдокласса nth-child с индексом потомка:

div.some_class > div
{
    height: 30px;
    background-color: silver;
    margin: 5px;
}
 
div.some_class > div:nth-child(2)
{
    border: 2px solid red;
}

Но к сожалению в нашей стране (и некторых соседних) еще много пользователей предпочитают современным браузерам уступающие им в поддержке стандартов Internet Explorer 7 и 8, которые этот всевдокласс не знают, но зато они знают first-child, поэтому решение будет таким:

div.some_class > div
{
    height: 30px;
    background-color: silver;
    margin: 5px;
}
 
div.some_class > div:first-child + div {
    border: 2px solid red;
}

В обоих примерах дочерний селектор > необходим для того чтобы указать на непосредственные div-ы потомки для div.some_class. И сестринский/братский селектор + необходим для того чтобы указать div, следующий сразу за первым дочерним к div.some_class (а именно div:first-child).

Официальная (W3C) документация о css-селекторах и псевдо-элементах в CSS.

1 Комментарий


Добавление комментария:

 css.php