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

user_5481714 0
Viewed 66

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.

css html
2 Answers

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.

user_135614100

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>

user_138249450
Related