not first of type on specific data attributes selecting all of them

Question

Consider the situation below:

h2[data-glossary-letter="A"]:not(:first-of-type) {
  display: none;
}
    
h2[data-glossary-letter="B"]:not(:first-of-type) {
  display: none;
}
    
h2[data-glossary-letter="C"]:not(:first-of-type) {
  display: none;
}

<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>

What I need to have happen, is hide all but the first h2 of each data letter attribute. For reasons I don't understand, it hides all of them except the first one.

The output needs to be:

A
B
C

:not(:first-child) and :not(:first-of-type) not working

That's because they are not siblings.

If you change the :not selector to the parent div, it will work.

My understanding of this selector is that it is siblings only. The logic behind what I'm trying to say is "for this particular header with this attribute, the ones that are NOT the first, hide them"

But what I'm trying is not working.

Is what I'm trying to do possible? If so how should this be approached.

score 1 · Accepted Answer · answered Nov 04 '20 at 18:31

The :first-of-type-selector only looks at the type, as the name implies.

A solution would be to hide any following element with the same selector, meaning it would not apply to the first element.
If you want to hide only the immediately following elements, use the +-selector instead of the ~-selector.

h2[data-glossary-letter="A"] ~ h2[data-glossary-letter="A"] {
  display: none;
}
h2[data-glossary-letter="B"] ~ h2[data-glossary-letter="B"] {
  display: none;
}
h2[data-glossary-letter="C"] ~ h2[data-glossary-letter="C"] {
  display: none;
}

<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>

In case I didn't explain it properly, there already is a better explained answer.

score 0 · Answer 2 · answered Nov 04 '20 at 18:56

Oskar Grosser's answer is correct for sure...

Just to add: You can use Adjacent sibling combinator(+) or General sibling combinator(~) :)

h2[data-glossary-letter="A"] + h2[data-glossary-letter="A"]{
  display: none;
}
    
h2[data-glossary-letter="B"] + h2[data-glossary-letter="B"] {
  display: none;
}
    
h2[data-glossary-letter="C"] + h2[data-glossary-letter="C"] {
  display: none;
}

<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>

Good thing you gave the names of the selectors as well, I forgot that in my answer (though still named that as an alternative selector by its symbol). — Oskar Grosser, Nov 06 '20 at 08:17

not first of type on specific data attributes selecting all of them

2 Answers2