2012-03-25 4 views
1

クラス "subnav"で最初の広告申込情報(<li>)を選択しようとしています。ネストされた要素の最初の子を選択するのに問題があります

私はちょうどそれを得るように見えることはできません。

HTML:

<nav> 
<ul class="navigation"> 

<li class="logo"><ul> 
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li> 
</ul></li> 
<li class="subnav"><ul> 
    <li><a href="index.htm">home</a></li> 
    </ul></li> 
<li class="subnav"><ul> 
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li> 
     <li><a href="design.htm">design</a></li> 
    </ul></li> 
    <li class="subnav"><ul> 
    <li><a href="flooring.htm">flooring</a></li> 
    <li><a href="paneling.htm">paneling</a></li> 
    <li><a href="beams.htm">beams</a></li> 
</ul></li> 
<li class="subnav"><ul> 
    <li><a href="shelving.htm">shelving</a> 
    </li><li><a href="mantels.htm">mantels</a></li> 
</ul></li> 
<li class="subnav"><ul> 
    <li><a href="news.htm">news</a></li> 
</ul></li> 
<li class="subnav"><ul> 
    <li><a href="woodtypes.htm">wood types</a></li> 
    <li><a href="phrases.htm">phrases</a></li> 
</ul></li> 

</ul> 
</nav> 

CSSセレクタはクラス「subnav」のライン項目の最初のインスタンスのことは何でしょうか?

+1

'li'は* list * item、not * line * item: – BoltClock

+0

を選択しようとしています

  • home
  • を選択していますか? –

    答えて

    1

    最初.subnav項目は右の単一.logoアイテムの後に起動した場合、あなたはあなたのマークアップで:first-childが実際.logo、およびない.subnav項目の一つであることを

    li.logo:first-child + li.subnav 
    

    お知らせを使用することができます。 li.subnav:first-childを使用しようとした場合、それが機能しない理由です。

    +0

    ありがとうございました。初心者であれば、覚えておくのは難しいようです。ロゴを最初に選択する必要がないため、将来このメソッドを複製できるかどうかはわかりません。確かにクラスに基づいて最初の子供を選択する方法がなければなりませんか? –

    +0

    @Doug Firr:残念ながら、CSSは最初の子をクラスと照合するためのセレクタを提供していません。私は、あなたが[この回答](http://stackoverflow.com/a/8539107/106224)で見ることができる優先ルールを含むやや冗長で多才なトリックを思いついたが、あなたの構造はより簡単なアプローチを可能にする。私はここに行った。その答えにCSS4セレクタでこれを可能にする可能性についての注意がありますが、それはやや遠い将来のものです。 – BoltClock

    +0

    今はクラスに基づいた最初の子セレクタがありません - 情報ありがとうございます。あなたは本当にそのセレクタで私を助けてくれました –

    0

    ちょうどあなたがjQueryのを使用している場合は、あなたが最初にsubnavを得ることができます

    "li.subnav:first" 
    

    を使用します。

    $("li.subnav:first") 
    

    ・ホープ、このことができます。

    +0

    **これでjQueryや他のセレクタライブラリを使うことができます**。 ':first'はCSSセレクタではありません。 – BoltClock

    関連する問題