Combine :first-of-type and :after

Question

Is it possible to combine :first-of-type and :after on the same class? For example:

.feature.feature--featured:first-of-type:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #4a90e2;
  left: 0;
}

<div class="row">

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

</div>

Can't get it working. Thanks!

Does this answer your question? [Multiple CSS Pseudo Classes](https://stackoverflow.com/questions/493232/multiple-css-pseudo-classes) — disinfor, Nov 04 '19 at 23:06
Don't know about you, but I clicked on run code snippet and I see the blue line in the bottom. — Ibu, Nov 04 '19 at 23:09
@TemaniAfif thanks for your help. I only want the after element on the first object. Now every col-md-4 has the blue bottom visual. — morrits, Nov 04 '19 at 23:09
*Now every col-md-4 has the blue bottom visual* --> there is only one col in the code you shared. Share a full and complete code to better show your issue — Temani Afif, Nov 04 '19 at 23:11
@disinfor Thanks for your help. But it's a little bit different. — morrits, Nov 04 '19 at 23:14

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Explanation why your code fails

What you may not be aware of and commenters as well as the other answer missed to point out, is that :first-of-type works in the context of sibling elements and not in the context of the whole HTML document as you may have thought.

MDN :first-of-type spec

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

Your .feature.feature--featured are all first of its type in their respective sibling context. They're all the first (and only) child within their parent element. Hence they all have the :after pseudo element attached to them. You only see one of these afters because they're all absolutely positioned and at the same position so they're rendered on top of each other. But there are still multitude of them.

So the correct solution is that you need to do :first-of-type on .col-md-4 because they're siblings within their parent element so the pseudo element will only be related to the child feature element of the first one (see @Mr Lister's answer for the code).

Thanks you so much for your explanation. This was something I really didn't knew. Wonderfull! — morrits, Nov 05 '19 at 13:19
I did fail to point out that `:first-of-type` is really a variant of `:first-child`, yes. Have an upvote. — Mr Lister, Nov 05 '19 at 13:23

score 1 · Answer 2 · answered Nov 05 '19 at 07:16

Like the comments say, if you want only the first div with col-md-4 to be targeted, put the first-of-type qualifier on the .col-md-4 class rather than the .feature.feature--featured class. That is all.

.col-md-4:first-of-type .feature.feature--featured::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #4a90e2;
  left: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

<div class="col-md-4">
  <div class="feature feature--featured feature-1 boxed boxed--border bg--white">
    <h5>This is a title</h5>
    <p>
      21 July, 2019
    </p>
    <a href="#">
                                            Read Story
                                        </a>
    <span class="label">New</span>
  </div>
</div>

</div>

Thanks for your help!! Really appreciated. – morrits Nov 05 '19 at 13:20 — morrits, Nov 05 '19 at 13:20

Combine :first-of-type and :after

2 Answers2

Explanation why your code fails