Geek asks and answers

Only with CSS: select the first occurrence of the class throughout the 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 the class "copyright" must be hidden, with the exception of the very first.

We tried to apply this approach , but, unfortunately, without success. It should be just a CSS solution. Any idea?

Thank you for your help!

+5
source share
2 answers

In this case, everyone .copyrightis the first and only one of a kind .inner, so you need to choose instead .inner. If you do not need to apply any special rules to the first child, you do not need to use the approach that I describe in this other question; just use this to hide other elements:

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

JSfiddle

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

0

More articles:


All Articles