Select first element of a type on page even when elements are nested at different levels

Question

I am practicing with CSS selectors. I know I could do this easily by specifying a class or an id, but for the purpose of the exercise: I'm curious if the following is possible without using those two CSS tools:

Imagine that I have have a whole bunch of p elements, and each p element is nested an unknown number of times in unknown block type elements. Ultimately I want to grab the very first p element that appears on the page and color its text red. How would I do that?

My following attempt does not work because the :first-of-type selector just grabs the first p element of its parent, so that doesn't help me here because each p element has different parents, so all the p elements on the page get selected.

I also attempted to wrap everything inside a div and then just grab the first p element inside that global div, but that didn't work either:

div:first-of-type p:first-of-type{
  color: red;  
}

p:first-of-type{
  color: red;  
}

<div> 
  <p> p element at one nesting</p>
</div>

<p> p element not nested</p>

<h1>
  <p> p element at one nesting (oddly nested inside h1 tag)</p>
</h1>

<div>
  <div> 
    <p> p element at two nestings</p>
  </div>
</div>

I believe that if you have HTML with a random location for the first p, you cannot currently do what you are trying to do w/o Javascript (but I hope someone proves me wrong) — The One and Only ChemistryBlob, Aug 30 '16 at 16:42
for the simple reason that CSS does not care about the DOM and has no control over it. It only adjust how to display it. — happymacarts, Aug 30 '16 at 16:54
I find this amusing, OP tags the answer as CSS, and refers that is practicing CSS selectors, but hey there is a (obviosly easy) jQuery answer. So lets go with that? — dippas, Aug 30 '16 at 17:01
@dippas, the accepted answer is the one I chose because it explained that there is not a css answer without `id` or `class` for this scenario. It was just a bonus that he provided a jQuery answer. If you (or anyone) provides a css answer then I will change the accepted answer. — Neil, Aug 30 '16 at 17:04
@happymacarts what did you do with the accepted answer? I did not mark yours as the accepted answer and now the one I marked as accepted is gone. — Neil, Sep 14 '16 at 23:05
@Neil. I didn't do anything with it. maybe the original supplier deleted it. — happymacarts, Sep 15 '16 at 16:28
@dippas. I commented in response to The One and Only Chemistry Blob's comment that it really can't be done and then provided a jquery solution. I also stated in my answer that in plain ol css it can't be done. (at least not easily and that I wanted to try) — happymacarts, Sep 15 '16 at 16:31
@happymacarts my apologies. For some reason I thought you had provided a jQuery answer, but I don't think you did. Instead I think you just referenced that one would use jQuery. — Neil, Sep 15 '16 at 20:30
@neil no biggie, I did below, but I also said its not possible regular try it this way... — happymacarts, Sep 15 '16 at 20:31

score 1 · Accepted Answer · answered Aug 30 '16 at 16:52

When there is an unspecified depth and no class assignments it becomes very difficult to target this without traversing the DOM Using Just plain-ol-vanilla css I don't see a way to do this but using a tiny jQuery you can achieve it

var ps = $('p');

console.log(ps[0])
$(ps[0]).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 
  <p> p element at one nesting</p>
</div>

<p> p element not nested</p>

<h1>
  <p> p element at one nesting (oddly nested inside h1 tag)</p>
</h1>

<div>
  <div> 
    <p> p element at two nestings</p>
  </div>
</div>

Select first element of a type on page even when elements are nested at different levels

1 Answers1