JSF で生成されたコロンを CSS セレクターで処理するにはどうすればよいですか?

JSF で生成された HTML 要素 ID: CSS セレクターのエスケープ コロン

JSF (JavaServer Faces) を使用する場合、HTML 要素 ID が発生する可能性があります。コロン (:) で生成されます。これにより、CSS セレクターを使用するときに問題が発生する可能性があります。コロンは疑似セレクターの開始を示します。

コロン化された ID の起源:

JSF は、HTML 要素のクライアント ID を次のように生成します。デフォルトは「FormID:ElementID」の形式です。これは、JSF アプリケーションで競合する ID を処理する便利な方法です。

CSS セレクターの問題:

残念ながら、CSS セレクター内のコロンは疑似セレクターの開始を表します。 :hover や :first-child など。 #FormID:ElementID のようなセレクターを使用しようとすると、エラーが発生します。

解決策:

1。コロンを「」または「3A」でエスケープします:

#FormID\:ElementID {
  /* CSS styles */
}

#FormIDA ElementID {
  /* CSS styles */
}

2.プレーン ID:

<div>
<pre class="brush:php;toolbar:false">#phoneWrapper table {
  /* CSS styles */
}

3 の HTML ラッパーを使用します。 UINamingContainer 区切り文字を変更します:

JSF 2.x では、web.xml の context-param セクションでデフォルトの区切り文字を変更できます:

<context-param>
  <param-name>javax.faces.SEPARATOR_CHAR</param-name>
  <param-value>-</param-value>
</context-param>

これは変更されます生成された ID を「FormID-ElementID」に変換し、CSS との互換性を高めます。セレクター。

4.フォーム ID の先頭の付加を無効にする:

JSF 1.2 以降では、h:form タグに prependId="false" を追加することで、フォーム ID の先頭の付加を無効にできます:

<form prependid="false">
  <datatable></datatable>
</form>

ただし、このアプローチは AJAX に影響を与える可能性があるため推奨されません。機能。

5. CSS クラスの使用:

<datatable></datatable>

.phone-table {
  /* CSS styles */
}

推奨事項:

ほとんどの場合、「」文字を使用してコロンをエスケープすることをお勧めします。これはシンプルでブラウザ間互換性のあるソリューションです。