Selectors (sister, child, attributes), border-spacing,: first-child,: before and:: in IE.

In CSS 2.1, there are many recommendations that are not supported by one of the most common browsers, IE6. But sometimes you want to use the full power of CSS. For example, the use of child, sister selectors, attribute selectors, etc. could simplify HTML (or even server-side scripts, for example, when computing the first descendant, whereas CSS for such cases provides for the pseudo-class: first-child). How can IE be made to understand CSS in such cases?

Using dynamic styles in Internet Explorer you can implement many missing CSS features.
I have prepared a test page on which some CSS features not supported in IE are emulated with one-time expression.

• child selector is emulated by working with the parentNode property:
  .div-p { color: red; }
* html .child-sel p {
z-index: expression(
runtimeStyle.zIndex = 1,
"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0
);
}

• the sister selector is emulated by working with the previousSibling property:
  .pp { color: red; }
* html .sibling-sel p {
z-index: expression(
runtimeStyle.zIndex = 1,
previousSibling && previousSibling.tagName && "p" == previousSibling.tagName.toLowerCase() ? (className = "pp") : 0
);
}

  
• the attribute selector is emulated by checking a specific property of an object (for example, the most common case, distinguishing input elements by the type attribute):
  .type-text { width: 300px; }
* html input {
z-index: expression(
runtimeStyle.zIndex = 1,
type && "text" == type.toLowerCase() ? (className = "type-text") : 0
);
}

  
• border-spacing is emulated by setting the cellspacing attribute of the table:
  table {
z-index: expression(
runtimeStyle.zIndex = 1,
cellSpacing = 5
);
}

  
• pseudo-elements: before and: after are implemented by changing the innerHTML property:
  blockquote p {
z-index: expression(
runtimeStyle.zIndex = 1,
innerHTML = "«" + innerHTML + "»"
);
}

  
• the pseudo-class: first-child is emulated by checking whether the reference to the element and the first descendant of the element's ancestor are equal:
  .first-child { color: red; }
* html li {
z-index: expression(
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className = "first-child") : 0
);
}

  

The solution also works in IE 5.x

Update: removed the reassignment of className, when you do not need to change the class. For example, for a child selector now
"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0
instead
className = "div" == parentNode.tagName.toLowerCase() ? "div-p" : className