CSS селектор дочернего элемента

Опубликовано: 17 марта, 2009 | Рубрика: Кодинг | Тэги: селекторы css, советы новичкам, хак для IE | Нет комментариев »

Когда работаешь с «живым» информационным сайтом, содержание которого постоянно изменяется и дополняется, приходится сталкиваться с проблемами абсолютно нетривиальными. Как это часто бывает, за наполнение сайта отвечают люди не имеющие представления о тегах, семантике и валидности кода. Бывает также, что и визуальные редакторы, с которыми работают эти «контент-манагеры» далеки от совершенства. Так или иначе, веб-разработчикам часто приходится решать нестандартные задачи. Вот, к примеру, одна из таких.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Дочерние селекторы</title>
<style type="text/css">
body { font: normal 1em Arial}
h3 { color: red; font: bold 1.2em Tahoma;}
strong { font-weight:normal; background:#eee; font-family:Arial}
</style>
</head>
<body>
<div>
<h3>Подзаголовок</h3>
<p>Она рада бы петь хорошо, не фальшивить... Она и умела не фальшивить, была <strong>мастером</strong> своего дела. Но разве виновата она была, что ее глаза не повиновались ей?</p>
</div>
<div>
<strong>Подзаголовок</strong>
<p>Они, эти красивые, но недобросовестные глаза, которые она будет проклинать до самой смерти, они, вместо того чтобы глядеть в ноты и следить за движениями его палочки, смотрели в волосы и в глаза дирижера...</p>
</div>
</body>
</html>

Содержимое добавлено на сайт извне с неправильным форматированием. Как видно, заголовок ошибочно заключён в тег strong. Дизайнер требует, чтобы подзаголовок был соответствующего стиля. Чтобы быстро решить вопрос, можно указать стиль подзаголовка и для strong. Однако, изменив стиль этого тега, мы изменим его для всех таких тегов. К счастью, здесь мы можем применить селектор дочерних элементов. Дочерним называется элемент, который непосредственно располагается внутри родительского элемента.

div > strong { color: red; font: bold 1.2em Tahoma; background:none}

В нашем случае, стили применяются только если текст в теге strong не является частью параграфа.
Жалко только вот, что популярнейший браузер всех домохозяек Internet Explorer 6 не поддерживает такой селектор. Конечно, прямого потомка можно определить с помощью javascript, но применять CSS Expression для таких задач «не комильфо».

div strong { color: red; font: bold 1.2em Tahoma; background:none}
div * strong {font-weight:normal; background:#eee; color:black; font-size:100%; font-family:Arial;}

Поэтому, попробуем обойтись без него: для начала назначим всем тэгам strong нужный нам стиль. Затем, с помощью универсального селектора * (звёздочка) вернём всем вложенным тегам первоначальные значения стилевых правил. Вот собственно и всё, мы получили то, что хотели.

Конечно, в моём случае, было бы правильнее исправить ошибку в форматировании текста, но зато теперь можно спокойно применять на практике выбор дочерних элементов и это будет работать во всех браузерах.