web-dev-qa-db-ja.com

CSSセレクターでJSFが生成したHTML要素IDをコロン「：」で使用する方法

私はJSFを使用して簡単なJava EEプロジェクトで作業してきました。

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

#phoneTable { ... }を使用してCSSを設定しようとしましたが、機能しません。クライアント側でHTMLソースを検査すると、JSF生成のHTMLテーブルがid="phoneForm:phoneTable"の形式でクライアントIDを取得しているようです。コロンが疑似セレクターの開始を示し、エラーが発生するため、#phoneForm:phoneTable { ... }を介してCSSを適用できません。

どうすればCSSセレクターで使用できますか？

cssjsfcss-selectorsfaceletsclientid
46
Dzung Nguyen

:はCSS識別子の特殊文字であり、:hover、:first-childなどの 擬似クラスセレクター の開始を表します。脱出する必要があります。

#phoneForm\:phoneTable {
    background: pink;
}

これはIE6/7では機能しません。これらのユーザーもサポートしたい場合は、代わりに\3Aを使用してください（後ろにスペースを入れてください！）

#phoneForm\3A phoneTable {
    background: pink;
}

上記はすべてのブラウザで動作します。

これを解決する方法は他にもいくつかあります。

  1. それをプレーンHTML要素でラップし、代わりにそれを介してスタイルを設定するだけです。

    <h:form id="phoneForm">
    <div id="phoneField">
        <h:dataTable id="phoneTable">

    と

    #phoneField table {
    background: pink;
}

  2. classの代わりにidを使用してください。例えば。

    <h:dataTable id="phoneTable" styleClass="pink">

    と

    .pink {
    background: pink;
}

    または

    table.pink {
    background: pink;
}

    追加の利点は、これにより、より多くの抽象化の自由が可能になることです。 CSSは、別の要素で同じプロパティを再利用する場合にセレクターやコピーペーストプロパティを追加する必要なく、複数の要素で再利用できます。

  3. JSF 2.x以降のみ：JSFのデフォルトのUINamingContainerセパレータをweb.xmlの次のコンテキストパラメータで変更します。例えば。

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

    そのため、区切り文字は-ではなく:になります。

    #phoneForm-phoneTable {
    background: pink;
}

    短所は、この文字をIDのどこでも自分で使用しないようにする必要があることです。したがって、これは非常に脆弱なアプローチです。

  4. JSF 1.2以降のみ：フォームidの前置を無効にします。

    <h:form prependId="false">
    <h:dataTable id="phoneTable">

    あなたが使えるように

    #phoneTable {
    background: pink;
}

    欠点は、<f:ajax>がそれを見つけることができず、不適切なプラクティスと見なされていることです： UIForm with prependId = "false" breaks <f：ajax render> 。この属性は他のすべてのUINamingContainerコンポーネントには存在しないため、正しい方法で処理する必要があります（上記の＃1または＃2）。

yourの特定のケースでは、＃2で説明されているようにそれをCSSクラスに変換することが最も適切な解決策だと思います。 「電話テーブル」は、Webサイト全体のユニークな要素を表すようには見えません。ヘッダー、メニュー、コンテンツ、フッターなどの実際のWebサイト全体の一意の要素は、通常、JSFフォームまたは他のJSFネーミングコンテナーでラップされないため、それらのIDにはプレフィックスが付けられません。

以下も参照してください。

77
BalusC
<h:form prependId="false">

を使用している場合は機能しません

<h:commandButton>
tag
0
Swarne27