Selecting only first match with CSS

Asked Jul 14 '15 at 08:19

Active Jul 14 '15 at 08:57

Viewed 42 times

document.querySelector("h2") returns only the first element that matches that class selector.

Could this be done in CSS? It is not like doing: h2:first-child as this would select every <h2> that is the first element of its parent...

Take for example this:

<body>
    <h1>Title</h1>
    <h2>Sub</h2>
    <article>
        <h1>Title2</h1>
        <p>Blabla</p>
        <h2>Introduction</h2>
        <p>Blabla</p>
        <h2>Methods</h2>
        <h2>Conclusions</h2>
    </article>
    <footer>
        <h2>Bla</h2>
    </footer>
</body>

I know there are ways to select only that <h2> containing "Sub", but could I ask like in querySelector: get all of them and filter the first, the second or the third one...?

edited Jul 14 '15 at 08:37

asked Jul 14 '15 at 08:19

Vandervals

5,774
6
48
94

are you looking for this? https://css-tricks.com/almanac/selectors/n/nth-of-type/ – Joel Almeida Jul 14 '15 at 08:20
@JoelAlmeida nope, I'd like to pick the first one no matters the structure – Vandervals Jul 14 '15 at 08:22
I understand what you are trying to achieve but with only css it won't be possible, at least of what I'm aware of. What if you target only the first level after the body? `body > h2:first-of-type{}` ? – Joel Almeida Jul 14 '15 at 08:40
Can't be done with pure css – Pete Jul 14 '15 at 08:45

Selecting only first match with CSS

0 Answers0