親に関係なくn番目の要素のCSSセレクタ

Question

親要素に関係なく、一致する要素のn番目の要素のCSSセレクタがありますか？

以下の方法で「第2段落」だけを選択する方法について説明します。第4のものもなければ？

<div> 
    <p>The first paragraph.</p> 
    <p>The second paragraph.</p> 
</div> 

<div> 
    <p>The third paragraph.</p> 
    <p>The fourth paragraph.</p> 
</div> 

Iは、p考え：第n-oftype（2）それを行うだろうが、それは（各親DIVの2である）第二及び第四の両方を選択します。

JSFiddle - https://jsfiddle.net/km4nbfz9/

EDIT - これはHTMLのほんの一例ビットで、質問は関係なく、親や構造のCSSセレクタに一致するn番目の要素のためにこの仕事を作る方法です。

Answer 1

なし

specは言う：

：n番目の子（+ B）擬似クラス表記は、いずれについても、+ B-1 兄弟文書ツリー内のその前を有する要素を表します0の正の整数またはゼロの値であり、親要素を持ちます。

nth-of-DOMセレクタはありません。

ここで手術言葉は@Marcos Pérez Gude

によってコメントで述べたようにDOMツリーがある」など、親、叔父ではないか、祖父母

を必要..which 兄弟である。もしそうならそれについて考えると、ノードは常にその親に依存しています。

Answer 2

 <div class="highlight"> 
     <p>The first paragraph.</p> 
     <p>The second paragraph.</p> 
    </div> 

    <div> 
     <p>The third paragraph.</p> 
     <p>The fourth paragraph.</p> 
    </div> 

のみ、あなたがスタイルを持っているclassやidを使用してthe second paragraphを強調するためのdivにclassまたはidを追加します。それ以外の場合はdivの内側のすべての第二の要素が強調表示されます

.highlight p:nth-child(0n+2) { 
background: red; 
} 

Answer 3

試してみてください。

div:nth-of-type(1) p:nth-of-type(2) { 
    background: red; 
}  

Answer 4

div:first-of-type p:nth-of-type(2) { 
     background: red; 
    }