NOT first element with a given class

Question

I have some code like this:

<span class="item multifilter-wrapper multifilter">
  <span class="item multifilter multifilter-item">
    <div></div>
  </span>
  <span class="item multifilter multifilter-item">
     <div></div>
  </span>
  <span class="item multifilter multifilter-item hasdata">
     <div>HELLO</div>
  </span>
</span>

Any multifilter-item span could have content, if it has content I add the hasdata class, as in the last item.

I would like to add a separator in between 2 multifilter-item spans in case there is more than one with data, so I have this BEFORE rule:

.multifilter-wrapper .hasdata:not(:first-child)::before{
   content: '|';
}

However it is adding the content in the example above with just 1 hasdata span.

Any ideas why?

Can you write the output of differents cases ? It could help I think — Navid EMAD, Aug 20 '15 at 10:13
Also, `span` elements can't contain `divs`...it's invalid HTML. — Paulie_D, Aug 20 '15 at 10:18
[This is a great answer](http://stackoverflow.com/a/8539107/838807) for a very similar question (selecting first, instead of not selecting first) — musefan, Aug 20 '15 at 10:43

musefan · Answer 1 · 2015-08-20T10:35:27.673

This is because .has-data is not the the first child, so it matches as expected.

I think you are confused as to what :first-child does. It checks if it is the first child element for it's parent (which it is not as you have 2 other ones before it). It does not check if it's the first child that is also a .hasdata class.

Basically the logic is:

class is hasdata
AND is not the first child element

To which it matches these rules, which is why the content separator is added.

There is no way to identify classes that are the first child with a specific class name in only CSS, you cannot write a rule for "is not the first hasdata class". I suggest you modify the html to have something like notfirsthasdata to identify elements that are not the first ones with content.

There is first-of-type which is the type of logic you want, however I believe this only matches with the element type (in your case span) and not the class name.

score 1 · Accepted Answer · answered Aug 20 '15 at 10:35

without having to modify your markup, you can use the general sibling selector: ~ (http://www.w3.org/TR/css3-selectors/)

http://jsfiddle.net/ossx1v1k/

.multifilter-wrapper .hasdata ~ .hasdata::before{
   content: '|';
}

please note that I've removed the div tags from inside the span tags in my jsfiddle example, because as Paulie_D remarked, it's invalid markup to have block elements inside inline ones.

NOT first element with a given class

2 Answers2