Селектор потомков >

Автор: Андрей Косяк Дата публикации:

CSS селектор ">" для IE6

Задача

"Объяснить"(хотя бы намекнуть) ИЕ6, что в CSS есть селектор потомков ">" и иногда его применение очень даже полезно и удобно.

Назад в будущее

В CSS2.1 есть такое понятие как "селекторы". Эти штуки очень сильно умеют облегчать жизнь верстальщику. Многие из них приходится довольно часто применять, это такие селекторы как [type=...], такие штуки как :first-child, :hover... последние, конечно, не совсем селекторы, но, в целом, из этой же оперы. А проблема то все в том же — практически с каждой такой штукой(будь то селектор или псевдокласс) в комплекте поставляется костыль для ИЕ6 в виде хаков, хорошо хоть с пожизненной гарантией.

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

Решение

Имеем меню с такой структурой:

<ul class="menu">
    <li><a href="">Пункт 1</a></li>
    <li class="active"><a href="">Пункт 2</a>
        <ul>
            <li><a href="">Пункт 2.1</a></li>
            <li><a href="">Пункт 2.2</a></li>
            <li class="active"><a href="">Пункт 2.3</a>
                <ul>
                    <li><a href="">Пункт 2.3.1</a></li>
                    <li><a href="">Пункт 2.3.2</a></li>
                    <li><a href="">Пункт 2.3.3</a></li>
                </ul>
            </li>
            <li><a href="">Пункт 2.4</a></li>
            <li><a href="">Пункт 2.5</a></li>
        </ul>
    </li>
    <li><a href="">Пункт 3</a></li>
    <li><a href="">Пункт 4</a></li>
    <li><a href="">Пункт 5</a></li>
</ul>

.menu {
	margin-left: 40px;
}
.menu ul {
	margin-left: 20px;
}
.menu ul ul {
	margin-left: 20px;
}
.menu li {
	margin: 5px 0;
}
.menu a {
	color: #000;
}
.menu a:hover {
	text-decoration: none;
}

Вроде бы ничего особенного, за исключением одного требования: активный пункт меню должен быть так же ссылкой, при этом жирный и без подчеркивания.

Не буду углубляться в подробности того, какие трудности возникли, скажу лишь, что "ожирняться" только одна ссылка ну никак не хотела, хотя под нормальные браузеры все же результата достиг, но ИЕ6 просто так сдаваться не пожелал. И тогда я вспомнил про селектор ">". Для нормальных браузеров:

.active > a {
    font-weight: bold;
    text-decoration: none;
}

Конечно, ради ИЕ6 пришлось в очередной раз побеспокоить "дядю Гошу", и он подсказал, где истина. Для ИЕ6:

* html li.active a,
* html li li.active a {
	text-decoration: none;
	font-weight: bold;
}
* html li.active * a,
* html li li.active * a {
	text-decoration: underline;
	font-weight: normal;
}

Да, конструкция на первый взгляд какая-то диковатая выходит, тем не менее, первое правило у нас выступает в роли самого селектора, а вторым правилом мы делаем обнуление. Я считаю, что в файл стилей для ИЕ6 допустимо ложить всё, от чего "дедушка" будет счастлив, поэтому "тюнинг" всегда подключаем условными комментариями.

Результат

Вывод

А вывод такой, что селектор ">" для подобных(а может и посерьезнее) случаев можно смело использовать.

Материалы

Решение подсмотрено на Хабре, за что автору большое спасибо.

Xiper