Псевдокласс :first-child для ИЕ6

Дата публикации: 09.08.2009

Проблема

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 отработает только один раз при загрузке страницы
  • дает возможность оставить более чистый (без множества классов) код программистам и поисковым роботам

Недостатки:

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