Наткнулся на одном форуме на интересующий вопрос, а именно, как применить стиль к тегу без индентификатора и класса, про кторый известно лишь его поядковый номер по отношению к конкретному дочернему тегу.
Если тема вам интересна, то можно для начала глянуть короткий урок на тему 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.
полезная статья спасибо!