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

There are many recommendations in CSS 2.1 that are not supported by one of the most common browsers, IE6. But sometimes you really want to use the power of CSS at full capacity. For example, the use of child, sister selectors, attribute selectors, etc. could simplify HTML (or even server-side scripts, for example, when calculating the first child, whereas in CSS for such cases the pseudo-class: first-child is provided). So how can you make IE understand CSS in such cases?

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

• the 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:
  .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
  );
}

  
• an attribute selector is emulated by checking a specific property of an object (for example, the most common case, distinguishing input elements by 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: first-child pseudo-class is emulated by checking the equality of the element reference and the first descendant of the element's ancestor:
  .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: eliminated the reassignment of className when it is not necessary to change the class. For example, for a child selector,
"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0
instead of
className = "div" == parentNode.tagName.toLowerCase() ? "div-p" : className