web-dev-qa-db-ja.com

ネストされた<li>ではなく、第1レベルの<li>をターゲットにします

次のHTMLがあります。

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

JQueryを使用して、<li>sの最初のレベルをターゲットにするにはどうすればよいですか？

たとえば、A、B、Cの文字で<li>sにカーソルを合わせてフォントを太字にする必要がありますが、ネストされた<li>sにそのフォントスタイルを適用しないでください（名前サブセクション）。

最初のjsfiddleは次のとおりです。 [〜＃〜] demo [〜＃〜] 使用する場合。

ありがとう。

編集-

解決策：

子セレクター、それが答えです。

JQueryは必要ありません。これはCSSを使用して実行できます。

更新された [〜＃〜] demo [〜＃〜]

EDIT-ここにより明確なデモ

おかげで、

jquerycsshtml-lists
52
Ricardo Zea

コンテナを持っている<div>とクラスを使用し、>セレクター。コンテナdivのクラスが「myclass」であるとしましょう。

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

注：>セレクターは、CSSセレクターとして使用する場合、IE6以下では機能しません。ただし、IE7およびIE8を含む他のすべてのブラウザーで動作し、JQueryで使用すると、IE6を含むjQueryでサポートされるすべてのブラウザーで動作します。

98
Spudley

これを行うことができます：

$('ul > li:not(:has(ul))');

ただし、最上位レベル<ul>有効なCSSセレクターでターゲットにできるID。

$('#topUL > li')
18
user113716

子セレクター、それが答えです。

JQueryは必要ありません。これはCSSを使用して実行できます。セレクターで第1レベルのli要素をターゲットにします。

ul > li {
    font-weight: bold;
}

そして、より深いli要素のスタイルを元に戻します：

ul > li li {
    font-weight: normal;
}

更新された [〜＃〜] demo [〜＃〜] です。

9
Ricardo Zea

すべてのli要素を対象とするルールを設定し、次にネストされたli要素を対象とするこれをオーバーライドするルールを設定します。

li{font-weight:bold;}
ul ul li{font-weight:normal;}

ネストされたli要素は通常の重みで、最上位は太字になります。

2
detaylor

あなたの問題が完全に解決されたとは思いません（いくつかの良い試みがありましたが）。問題の例では、スタイルを親に適用し、子がスタイルを継承できないようにします。これはCSSの問題です。

親要素を知っていれば、リスト項目をターゲットにすることができます（一部の人が述べているように）。次に、ホバーにクラスを追加します。

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

また、CSSには親のクラスと、子の否定スタイルがあります。

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }
1
typeof