Matching first element in whole document? [duplicate]

Question

I want to match the first H1 element in my whole document. However, right now I'm faced with a problem.

I'm using the following CSS selector:

h1:first-child {
...
}

However, it matches several H1 tags on the page. How can I make it match only the first one?

Answer 1

There is no such selector; all available selectors can only match siblings, not the order of elements of the same name across multiple parents. Your selector would be very brittle anyways.

Instead, simply markup the first h1 with an appropriate class, or match its structure. For example, you might want to match

body>header:first-child>h1

instead.