IEのセレクター（姉妹、子、属性）、ボーダー間隔、最初の子、前と後：。

CSS 2.1には、最も一般的なブラウザーの1つであるIE6でサポートされていない多くの推奨事項があります。 ただし、CSSの全機能を本当に使いたい場合があります。 たとえば、子、姉妹セレクター、属性セレクターなどの使用。 HTMLを単純化することができます（たとえば、最初の子を計算するときのサーバー側スクリプトでさえ、そのような場合のCSSでは擬似クラス：first-childが提供されます）。 では、そのような場合にどのようにしてIEにCSSを理解させることができますか？



Internet Explorerで動的スタイルを使用すると、欠落しているCSS機能の多くを実装できます。

IEでサポートされていないCSS機能を1回限りの式でエミュレートするテストページを用意しました。

• parentNodeプロパティを操作することにより、子セレクターがエミュレートされます。
  
  .div-p { color: red; }

* html .child-sel p {

z-index: expression(

runtimeStyle.zIndex = 1,

"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0

);

}


  
  
  
  
• 姉妹セレクターは 、previousSiblingプロパティを操作することでエミュレートされます。
  
  .pp { color: red; }

* html .sibling-sel p {

z-index: expression(

runtimeStyle.zIndex = 1,

previousSibling && previousSibling.tagName && "p" == previousSibling.tagName.toLowerCase() ? (className = "pp") : 0

);

}


  
  
  
  
  
  
• 属性セレクターは 、オブジェクトの特定のプロパティをチェックすることでエミュレートされます（たとえば、最も一般的な場合、入力属性をタイプ属性で区別します）。
  
  .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 + "»"

);

}


  
  
  
  
  
  
• the：first-child擬似クラスは 、要素参照と要素の祖先の最初の子孫の等価性をチェックすることによりエミュレートされます：
  
  .first-child { color: red; }

* html li {

z-index: expression(

runtimeStyle.zIndex = 1,

this == parentNode.firstChild ? (className = "first-child") : 0

);

}


  
  
  
  
  
  

このソリューションはIE 5.xでも機能します



更新：クラスを変更する必要がない場合のclassNameの再割り当てが修正されました。 たとえば、子セレクターの場合

"div" == parentNode.tagName.toLowerCase() ? (className = "div-p") : 0





の代わりに

className = "div" == parentNode.tagName.toLowerCase() ? "div-p" : className