CODEWITHSUNDEEP
csscss-selectors
RealSteel
RealSteel

Reputation: 1931

apply css to after element last child

I have a requirement where I need to remove the last border of an element, but the border is applied using the after element.

My code : 

<div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
</div>

.abc::after {
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

I've tried removing the border for after element using the below code, but not working.

.abc:after:not([style*="display: none"]):last-child {
  border-bottom: none;
}

Is this possible using this approach? JSFiddle

Upvotes: 1

Views: 1013

Answers (4)

David Thomas
David Thomas

Reputation: 253318

The problem with the selector you're using is that it's invalid, according to the specifications for pseudo-elements:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. https://drafts.csswg.org/selectors-3/#pseudo-elements

Therefore your selector is invalid; and should instead be:

.abc:after:not([style*="display: none"]):last-child

Instead, because you're styling the pseudo-element for the :last-child element, you should use:

.abc:last-child::after


.abc::after {
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

.abc:last-child::after {
  border-bottom: none;
}
<div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
</div>

Upvotes: 1

Aman Prajapati
Aman Prajapati

Reputation: 157

Also you can try this, if you don't go with after then:

.abc{
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

.abc:last-child {
  border-bottom: 0px;
}

Upvotes: 0

user2575725
user2575725

Reputation: 

.abc::after {
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

.abc:last-child::after {
  border-bottom: none;
}
<div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
</div>

Upvotes: 0

DPS
DPS

Reputation: 1003

Try this

.abc:last-child:after{
  border-bottom:none;
}

Upvotes: 1

Related Questions