4

Is there a CSS selector for the nth of a matching element, regardless of any parents.

e.g. in the following how to select just "The second paragraph." without also the fourth one?

<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 thought p:nth-oftype(2) would do it but that selects both the second and fourth (which is the 2nd of each parent div).

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

EDIT - This is just ONE example bit of HTML, question is how to make this work for the n'th element that matches CSS selector regardless of parents and structure.

Ryan
  • 23,871
  • 24
  • 86
  • 132
  • have a look on **[this](http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child)** – mmushtaq Jul 29 '16 at 11:48
  • 2
    The DOM is a tree. So if you think about it, a node depends always on its parent. – Marcos Pérez Gude Jul 29 '16 at 11:51
  • you can't just do without parent, If you can do so I will give you upvote – ma_dev_15 Jul 29 '16 at 11:57
  • For ma_dev_15 and @pullata-praveen now I know its not possible in a broader sense (the real markup I am working with is much much more complex than given in the example). I can use a different technique. Likely jQuery to get an array of all elements, then get nth from that array. – Ryan Jul 29 '16 at 12:23

4 Answers4

3

NO

The spec says:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

There is no nth-of-DOM selector.

The operative word here is siblings..which requires a parent, not uncles or grandparents etc.

As mentioned in the comments by @Marcos Pérez Gude

"The DOM is a tree. So if you think about it, a node depends always on its parent."

Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-1

try:

div:nth-of-type(1) p:nth-of-type(2) {
    background: red;
}
kalsowerus
  • 998
  • 8
  • 23
Hasan Misbah
  • 46
  • 4
-2
    div:first-of-type p:nth-of-type(2) {
        background: red;
    }
Omkar Vaity
  • 55
  • 4
-3
        <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>

Add class or id to the div to highlight the second paragraph only and using class or id you have to style otherwise every 2nd element inside a div will get highlighted 

 .highlight p:nth-child(0n+2) {
background: red;
}
Praveen
  • 985
  • 8
  • 31
  • if you have any solution other than this please find and post here when you don't have an idea other than this don't discourage by saying not useful – Praveen Jul 29 '16 at 11:54
  • 2
    I am not the one who downvoted but you should look at the broader question than just the example code provided. Your example will work if the first `div` or the `div` with `class='highlight'` has two `p`. What if the second `p` is part of the second `div`? What if their structure is dynamic? – Harry Jul 29 '16 at 11:56
  • 3
    Steady on chaps - *I* didn't down-vote you. BUT if you read the question again you will see that its a general question about 'regardless of parent' not about how to make it work with that one *example* - so you didn't answer the question and thats why you were downvoted I expect. If you can't take criticism then maybe the internet isn't for you? – Ryan Jul 29 '16 at 11:59
  • i think user does not even know the basics of selectors where to use and how to use and in what conditions it is used – Praveen Jul 29 '16 at 11:59
  • 2
    I suspect the downvotes are because you aren't answering the **broader** question. Yes, your code works **in the example code** but that is not what the question is about. – Paulie_D Jul 29 '16 at 12:03
  • 1
    ..and THAT **is** the answer. Sometimes a simple NO *is* the right answer. – Paulie_D Jul 29 '16 at 12:15