Last-Child:After Not Rendering in Chrome? Pseudo-Element Use Issue

last-child:after not rendering in Chrome? Pseudo-element use issue?

Looks like a Chrome bug. This works:

<ul>
  <li>One</li>
  <li>Two</li>
  <li id="blah">Three</li>
</ul>
<div id="footer">
  <p>This is a footer</p>
</div>

With CSS referencing the last element by ID:

ul { text-align: center; }   

#footer { text-align: center; margin-top: 200px;}

li:first-child:before, li:last-child:after, #footer:before {
   display: block;
   content: "-";
   color: red;
   margin: 10px 0;
}

#blah { }

If you remove the "#blah{}", reverts to buggy behavior.

EDIT: This has been fixed a long time ago in Chrome

Chrome not updating styles when last-child changes

For what it's worth, as a workaround you could replace the last-child pseudo class with nth-last-child(1) which does exactly the same thing as last-child, but is unaffected by the bug.

$("#addMore").one("click", function() {

  $("#container").append($("#container").html());

  $(this).remove();

});

.block {

  border-bottom: 1px solid red;

  counter-increment: block;

  margin: 20px 0;

  position: relative;

}

.block:after {

  content: " " counter(block);

}

.block:nth-last-child(1) {

  border-bottom: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">

  <div class="block">Test block</div>

  <div class="block">Test block</div>

  <div class="block">Test block</div>

  <div class="block">Test block</div>

</div>

<div id="addMore">Add more blocks</div>

:last-child not working as expected?

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */

  font-weight: bold;

}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/

  background: crimson;

}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/

  color: beige;

}

<div class='parent'>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <div>Child w/o class</div>

</div>

<div class='parent'>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <div class='child-2'>Child w/o class</div>

</div>

<div class='parent'>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <div class='child'>Child</div>

  <p>Child w/o class</p>

</div>

Chrome does not display pseudo-element

Its because chrome applies the overflow:hidden to the <hr> element by default in user agent stylesheet. So you will need to apply overflow:visible to the <hr> element.

body {

  padding-top: 10rem;

  padding-left: 1rem;

  counter-reset: line 7;

}

hr {

  overflow: visible;

}

.graph__coordinate-line {

  border: 1px dashed #ccc;

  position: relative;

  width: calc(100% - 5rem);

  font-size: 1.3rem;

}

.graph__coordinate-line:not(:last-of-type) {

  margin-bottom: 2rem;

  counter-increment: line -1;

}

.graph__coordinate-line:not(:last-of-type)::after {

  content: " " counter(line) " K ";

  position: absolute;

  top: -1.5rem;

  left: -3.2rem;

}

.graph__coordinate-line:last-of-type::after {

  content: "0";

  position: absolute;

  top: -1.5rem;

  left: -3.2rem;

}

.graph__coordinate-line::before {

  content: "\2013";

  position: absolute;

  top: -1.5rem;

  left: -5rem;

}

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

<hr class="graph__coordinate-line">

Chrome not showing :after pseudo selector

The content property is required for :before and :after pseudo selectors. If it is not included, it will have no effect on the element. If you are using the selectors to preform a clearfix, or some other case where you don't actually want any content, you can simply leave the content property blank with content:''; Like you have already done for the :before selector. Your CSS should look like this:

.form-horizontal .form-group:after {
  content: '';
  clear: both;
}

Learning To Use The :before And :after Pseudo-Elements In CSS

JSFiddle

Applying last-child to element not working

Your selector doesn't work for your current markup because the last child is an input, not a div.div-two.

Is div#div-one only going to contain those two kinds of elements? If so, you can use :last-of-type instead, which picks the last div (though regardless of its class):

#div-one div:last-of-type { border-bottom:solid 1px #999; }

However if your inner div elements have other classes besides .div-two, it will be pretty difficult to choose the last .div-two element. Your given code makes it easy because div and input are distinct element types and only the .div-two class is present.

CSS selector form:last-child doesn't work

This works just fine when you create a proper HTML file, the reason it doesn't work in your fiddle is because some online tools add some scripts just before the body element closing tags, thus the form you are expecting to have the styling, is not in fact the body's last-child.

To see it working on your fiddle just wrap the forms in a div container and you should see it as expected:

<body>
  <div>
    <form>
      <p>First Form</p>
    </form>
    <form>
      <p>Second Form</p>
    </form>
  </div>
</body>

you can refer to this question for more info.

---

Related Topics