Hiding elements with same class after first one displayed

Question

If I have HTML:

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>

Can I write a rule in my CSS that says:

.myClass {
    /* only display the first instance of the class */
}

Answer 1

Rick Hitchcock is very close.

The correct selector is ~, as in:

.myClass ~ .myClass {
display: none;
}

---

Explanation:

In CSS:

• the + selector indicates an element which is an immediately subsequent sibling.
• the ~ selector indicates an element which is any subsequent sibling.

Consequently, with the following markup:

<div class="myContainer">
<div class="myClass">1</div>
<img class="myImage" alt="My Image" />
<div class="myClass">2</div>
<div class="myClass">3</div>
</div>

If you declare:

.myClass + .myClass {
display: none;
}

then

<div class="myClass">3</div>

won't be visible, but

<div class="myClass">2</div>

will be visible.

Whereas, if you declare:

.myClass ~ .myClass {
display: none;
}

then neither

<div class="myClass">2</div>

nor

<div class="myClass">3</div>

will be visible.

Answer 2

This will hide all .myClass elements that follow another .myClass element:

.myClass + .myClass {
  display: none;
}

It's basically the inverse of "only display the first instance of the class." In this case, it's "hide all but the first instance of the class."

Snippet:

.myClass + .myClass {
  display: none;
}

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>