Last element inside a link, inside a class

Question

Trying to call out the last element inside a link, inside a class. But the challenges is I can not just use the "last-of-type" or the "last child" of card_content, because there is a version of .card that is not a link.

a.card:link .card_content:last-of-type{
  margin-bottom: 0;
  background-color: #ff6600;
}


.card{
  width: 50%;
  height: 50%;
  border: 0.5px solid #efefef;
}

<a href="#" class="card" >
<div class="card_icon">image go here</div>
<div class="card_content">
<h3>I am a header</h3>
<p>I am some description.</p>
<p>Need this to be 0 on margin-bottom</p>
</div>
<div class="card_line">
Click</div>
</a>

<div class="card" >
<div class="card_content">
<p>none link version</p>
<p>Need this to be 0 on margin-bottom</p>
</div>
<div class="card_line">
Click</div>
</div>

score 1 · Answer 1 · answered Mar 13 '19 at 00:04

1

:last-of-type will work on an element, but not on a class.

The Mozilla documentation says:

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

This thread also discusses this.

answered Mar 13 '19 at 00:04

focorner

1,927
1
20
24

score 1 · Accepted Answer · answered Mar 13 '19 at 00:13

Because last-of-type does not work on classes, this is the closest you can get via pure CSS. This solution presupposes that the last instance of .card_content is the second element from the end.

a.card[href] .card_content:nth-last-of-type(2) {
  margin-bottom: 0;
  background-color: #ff6600;
}

.card {
  width: 50%;
  height: 50%;
  border: 0.5px solid #efefef;
}

<a href="#" class="card">
  <div class="card_icon">image go here</div>
  <div class="card_content">
    <h3>I am a header</h3>
    <p>I am some description.</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_content">
    <h3>I am a header</h3>
    <p>I am some description.</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_line">
    Click</div>
</a>

<div class="card">
  <div class="card_content">
    <p>none link version</p>
    <p>Need this to be 0 on margin-bottom</p>
  </div>
  <div class="card_line">
    Click</div>
</div>

Last element inside a link, inside a class

2 Answers2