Селекторы (сестринский, дочерний, атрибутов), border-spacing, :first-child, :before и :after в IE.

В CSS 2.1 есть множество рекомендаций, не поддерживаемых одним из самых распространённых браузеров, IE6. Но иногда так хочется использовать возможности CSS на полную мощность. Например, использование дочерних, сестринских селекторов, селекторов атрибутов и т.п. могло бы упростить HTML (или даже серверные скрипты, например, при вычислении первого потомка, тогда как в CSS для таких случаев предусмотрен псевдокласс :first-child). Каким же образом можно заставить IE понимать CSS в таких случаях?

Используя динамические стили в Internet Explorer можно реализовать множество отсутствующих возможностей CSS.
Я подготовил тестовую страницу, на которой при помощи одноразовых expression эмулируются некоторые возможности CSS, не поддерживаемые в IE.

• дочерний селектор эмулируется работой со свойством parentNode:
  .div-p { color: red; }
* html .child-sel p {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    "div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0
  );
}

• сестринский селектор эмулируется работой со свойством previousSibling:
  .p-p { color: red; }
* html .sibling-sel p {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    previousSibling && previousSibling.tagName && "p" == previousSibling.tagName.toLowerCase() ? (className = "p-p") : 0
  );
}

  
• селектор атрибутов эмулируется проверкой определённого свойства объекта (например, самый распространённый случай, различение элементов input по атрибуту type):
  .type-text { width: 300px; }
* html input {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    type && "text" == type.toLowerCase() ? (className = "type-text") : 0
  );
}

  
• border-spacing эмулируется установкой атрибута cellspacing таблицы:
  table {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    cellSpacing = 5
  );
}

  
• псевдоэлементы :before и :after реализуются с помощью изменения свойства innerHTML:
  blockquote p {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    innerHTML = "«" + innerHTML + "»"
  );
}

  
• псевдокласс :first-child эмулируется проверкой равенства ссылки на элемент и первого потомка предка элемента:
  .first-child { color: red; }
* html li {
  z-index: expression(
    runtimeStyle.zIndex = 1,
    this == parentNode.firstChild ? (className = "first-child") : 0
  );
}

  

Решение работает и в IE 5.x

Update: устранил повторное присваивание className, когда менять класс не нужно. Например, для дочернего селектора теперь
"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0
вместо
className = "div" == parentNode.tagName.toLowerCase() ? "div-p" : className