ASP.NET WebフォームのCSSセレクタ

Question

レイアウト用のCSSファイルを含むWebフォームアプリケーションがあります。 IDを使用せずにCSSで行うのがはるかに難しい私の要素の1つは、可視性サーバ側を制御しているのでrunat="server"でなければなりません。

<div id="x"> 
    <div id="whatever" runat="server" visible="false"> 
     <div id="y"> 
      .... 
     </div> 
    </div> 
</div> 

私の問題は、CSSで、私は私のセレクタとそのwhatever div要素を無視する方法がわからない、と私はCSSをインライン化し、クライアント制御への変換サーバーに入れない限り、私は知らないだろうということです実行時まで制御名。

#x 
{ 
    position:absolute; 
    height:30px; 
} 

    #x #whatever??? #y img 
    { 
     margin:-7px 15px 0 30px; 
    } 

    #x #whatever??? div 
    { 
     width:250px; 
     float:left; 
    } 
etc. 

この問題を回避するにはどうすればよいですか？出力をレンダリングしませんが、コンテンツの可視性/レンダリングを制御するために使用できるサーバーサイドコンテナコントロールはありますか、またはその中間divを無視するためのトリックがCSSにありますか？

これは、私がx divをマスタページに持っていて、whateverとy divが両方ともページ内にあるという事実によって、さらに混乱します。私はMVCを使用していた場合、これは問題ではないことは分かっていますが、この時点では切り替えはオプションではありません。

Answer 1

CSSクラスセレクタを使用すると、この問題を回避するのは簡単ですが、CSS IDセレクタほど高速ではありませんが、常に動作します（div要素のクライアントIDを計算できますが、

Answer 2

これはあなたの例ですが、何かを選択するたびにツリー全体を掘り下げているようです。このCSSで必要とされない、以下のトリックを行います：

直接 'x' のセレクタ

#x 
{ 
    position:absolute; 
    height:30px; 
} 

'Y'

#y img 
{ 
    margin:-7px 15px 0 30px; 
} 

の子孫である任意の画像

「x」の子孫である任意のdiv

#x div 
{ 
    width:250px; 
    float:left; 
} 

Hereは、わかりやすいセレクターの説明書です。多かれ少なかれ、必要なものを手に入れて、here（私の好きなテストサイト）のようなどこかでテストしてください。

Answer 3

.net 4を使用している場合は、サーバー側で指定したIDと同じIDが必要なブロックにClientIDMode="Static"を指定できます。

ただ、誰かがそれを必要とする場合には、あなたがこのようなあなたのJavaScriptフレームワークによって生成されたID取得することができます：

document.getElementById('<%= some_control.ClientID %>');