CSS Select First Element of Type

Question

How can I use CSS to find the first element of a given type?

I was trying:

a:first-of-type { }

and

a:nth-of-type(1) { }

But they were selecting child elements as well. I need to select only the first <a> tag in the entire page.

It all depends on how your HTML is build. Please add it to your question. — GreyRoofPigeon, Jun 29 '15 at 07:02
Ted, there are many tags in my webpage. I only need to select the first one in the whole page, no children. How do I do that? — Rick Helston, Jun 29 '15 at 07:07
How to select elements on the page depends also on how the Dom is structured. That's why we are asking to see some html too — Lelio Faieta, Jun 29 '15 at 07:10
Everyone commenting asking for the HTML structure is missing the point. The whole point of this question is to select the first occurrence of an element *regardless of HTML structure*. By asking for the HTML structure you're essentially saying that it *does* depend on the structure - in which case you might as well post *that* as an *answer*. (But there's no need to because this question is a duplicate anyway.) — BoltClock, Jun 29 '15 at 08:01
Bolt ⏰ is right on, the HTML structure is completely irrelevant as the whole point is finding the first element of any given type REGARDLESS of the HTML. The only point where Bolt ⏰ failed is giving a link to where the question was originally answered. — Rick Helston, Jun 29 '15 at 08:26
I did mark your question as a duplicate, but someone else unmarked it for some reason so I marked it again. That stuff doesn't auto-refresh unfortunately, so you might have seen my comment prior to the dupe notice. — BoltClock, Jun 29 '15 at 08:53

score 0 · Answer 1 · answered Jun 29 '15 at 07:54

The general case is impossible to do in CSS. Only JS/jQuery'd allow it or a precise knowledge of the structure of your HTML in a given page.

Why?
An element has no way to know if, in a preceding sibling of one of its ancestors, there'd be a "preceding" a element. Because there isn't and there won't be a parent selector.

<body>
  <p>
    <a href="#"><!-- the one you'd want to select -->
  </p>
  <a href="#"><!-- this one knows he is the first of his type in the pool of direct descendant (children) of body
                   but no more can be achieved (in CSS) -->
</body>

In pure CSS, you can select each first type of element of their respective parent for a given level, like:

body > * > * > a:first-of-type { /* level 3, great-grandchildren of body */ }

and that sums pretty much all

This has nothing to do with there not being a parent selector. Even if there was, you wouldn't be able to use it to determine an element's overall index. This is why jQuery came up with :eq(). — BoltClock, Jun 29 '15 at 07:57

score -1 · Answer 2 · answered Jun 29 '15 at 07:16

-1

a:first-child{
  // your styles.
}

Use above code with the main selector container Prefix to this class you want.

for suppose here you want first a tag with your entire HTML page then just write

body a:first-child{
      // your styles.
}

answered Jun 29 '15 at 07:16

Himesh Aadeshara

2,114
16
26

Doesn't work. It selects several tags instead of just the first. – Rick Helston Jun 29 '15 at 07:26

CSS Select First Element of Type

2 Answers2