最初のリスト項目のCSSセレクター

私は以下のhtml構造を持っています。最初のリスト項目のCSSセレクター

<ul> 
    <script id="agendaTmpl" type="text/x-jquery-tmpl"> 
       <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');"> 

       </li> 
    </script> 
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?  session_id=2');"> test</li> 
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?  session_id=2');"> test</li> 
</ul>

私は、リストの最初の李にクラスを適用する必要があります。スクリプトタグを削除することはできません。これは、構造のテンプレートであることに注意してください。 ul > li:first-childで試しましたが、動作しません。これは、liがulの最初の子である場合、つまりscriptタグが存在しない場合にのみ機能します。

ulの最初のliにスタイルを適用する方法を提案してください。

注：最初のliに新しいクラスを追加することはできません。

出典

2012-05-14 Raghav

"スクリプトタグは削除できません"はい、そうすることができます。あなたが持っているものは無効なhtmlです。 – PeeHaa

@Raghav、選択したリスト項目をハイライト表示しますか？ – freebird

@ RepWhoringPeeHaa：技術的に削除できることは分かっています。しかし、許可されていません。私はそれが有効なhtmlであれば気にしない、いくつかのプラグインによって生成され、既存のコードを壊すことはしたくない。 @freebird：そうです。私は最初の李にコーナーを適用する必要があります。最初のタイプは私のために働くようです。 – Raghav

代わりfirst-of-typeを使用してみてください：

ul > li:first-of-type

これはCSS3のセレクタである - ので、完全に古いブラウザでサポートされていません。クロスブラウザのサポートがもっと良いのは、@ Boltclockの答えをご覧ください。

出典

2012-05-14 09:11:34

魅力的なものです.U：それにはまっています。:) – Raghav

jQueryは '：first-of-type'をサポートしていないので、ブラウザサポートの問題は特に重要です。 – BoltClock

jqueryでこれは私のために働いています$（ "ul> li：first-of-type"）。しかし、これを使用しているので、上記の場合は大丈夫です。 – Raghav

これは、liがulの最初の子である場合、つまりスクリプトタグが存在しない場合にのみ機能します。

正確に。

あなたはjQueryのテンプレートを使用している、とあなたがHTMLソースを変更せずにそれをクラスを与えるために最初liを操作しようとしているので、あなたにも、すべてのjQueryを使ってこれを行うことがあります。

$('ul > li:first').addClass('first');

出典

2012-05-14 09:11:33 BoltClock

最初のリスト項目のCSSセレクター

答えて

関連する問題