With CSS only: Select first occurrence of class throughout whole document

Question

We have a DOM like this:

<div class="outer">
    <div class="inner"> <!--// No "copyright" in this node //-->
        <div class="content">...</div>
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// DISPLAY THIS ONE //-->
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// Hide this one //-->
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// Hide this one too, etc. //-->
    </div>
    <!--// etc. //-->
</div>

All elements with class "copyright" must be hidden, with exception of the very first one.

We tried to apply this approach, but unfortunately with no success. It must be a CSS only solution. Any idea?

Thanks for your help!

score 6 · Answer 1 · answered Jun 22 '12 at 08:18

6

In this case, each .copyright is the first and only one of its kind in .inner, so you need to select by .inner instead. If you don't need to apply any special rules to the first child, you don't need to use the approach I describe in that other question; simply use this to hide the other elements:

.inner ~ .inner .copyright {
    display: none;
}

answered Jun 22 '12 at 08:18

BoltClock

700,868
160
1,392
1,356

Great, thanks! Btw. I need that to use the first occurrence as footer when printing the site (in Firefox): @media print { .copyright { position: fixed; bottom: 0; } .inner ~ .inner .copyright { display: none; } } – Lionel Jun 22 '12 at 09:03
Sorry to disturb again, but we have forgotten an important detail: What if the first "inner"-node does not contain a "copyright" class? – Lionel Jun 22 '12 at 09:44
1

That means you have to check for an `.inner` that contains a `.copyright`, which you can't do using pure CSS. You'll need JavaScript. – BoltClock Jun 22 '12 at 09:53

Grant Anderson · Answer 2 · 2022-09-27T15:55:06.993

This is still the top answer on Google for "css select first occurrence of class" so adding the simple technique I found to work.

This solution doesn't specifically solve the OP but does allow you to select the first element with a class amongst siblings.

You can use a combination of the sibling and not selectors as shown in this JSFiddle

For example:

.my-class:not(.my-class ~ .my-class) {
  background: red;
}

How does this work?

The sibling selector (~) selects elements which are somewhere after other elements.

So this would select every element except the first one:

.my-class ~ .my-class {
  background: red;
}

We then just use the :not selector to reverse this, i.e. select only the first element.

I have only tested this on Chrome but think it should work on most modern browsers.

score 0 · Answer 3 · answered Jun 22 '12 at 08:26

0

Try this one JSfiddle

div.inner > .copyright { display:none; }
div.inner:first-child .copyright { display:block; background:#000; }

answered Jun 22 '12 at 08:26

naim shaikh

1,103
2
9
20

1

We have forgotten an important detail: What if the first "inner"-node does not contain a "copyright" class? – Lionel Jun 22 '12 at 09:44

With CSS only: Select first occurrence of class throughout whole document

3 Answers3