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

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!

csscss-selectors


Solution 1:[1]

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;
}

Solution 2:[2]

Try this one JSfiddle

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

?

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BoltClock
Solution 2 naim shaikh
Solution 3

Related Questions