Xiper

Псевдокласс :first-child

Автор: Евгений Рыжков Дата публикации:

Проблема

IE6 не понимает псевдокласс first-child.

Решение — используем expression

Суть метода — скрипт при загрузке страницы, находит необходимый (первый) элемент и присваивает ему класс с необходимым оформлением.

<ul>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
</ul>

CSS:

li {
border-left: 1px solid #000;
display: inline;
margin-right: 10px;
}
li:first-child
, li.first-child{
border: none;
}
* html li {
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}

Update! Иногда запись для ИЕ нужно изменить таким образом:

* html li {
z-index: expression(
runtimeStyle.zIndex = 1,
parentNode.firstChild ? (className += " first-child") : 0
)
}

Плюсы метода:

  • достаточно прост и гибок
  • оптимизированный expression отработает только один раз при загрузке страницы
  • дает возможность оставить более чистый (без множества классов) код программистам и поисковым роботам

Недостатки:

  • так же придется дополнительно подумать с динамически созданными элементами
  • не проходит валидацию