0

It seems the CSS pseudo-class :last-child doesn't work on form elements, but :first-child does.

form:first-child {
  border: 1px solid blue;
}
form:last-child {
  border: 1px solid red;
}
<body>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</body>

JSFiddle

I'm only interested in styling the form element itself and I've only tested this in Chrome. The first form gets a blue background and the second gets no background. Chrome's inspector doesn't show :last-child applied to the second form either. So how does one select the last form using CSS?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Matt S
  • 14,976
  • 6
  • 57
  • 76
  • 1
    Strange thing is, when adding `body` to the selector `form:last-child` it still doesn't work, stranger still both these selectors are valid on the last child: `form:not(:first-child) {} form:not(:last-child) {}` – UncaughtTypeError Nov 27 '17 at 14:38

4 Answers4

4

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.

Carlos Valencia
  • 6,499
  • 2
  • 29
  • 44
2

The issue:

- You have other siblings like scripts below form so those are going to be the last-child

Solutions(s)

Use (first)/last-of-type instead, as it is safer, because you only want to target forms

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

form:first-of-type {
  border: 1px solid blue;
}

form:last-of-type {
  border: 1px solid red;
}
<form>
  <p>First Form</p>
</form>
<form>
  <p>Second Form</p>
</form>

If you want to use (first)/last-child then you need to add parent in your selector and HTML (in case you don't have)

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

section form:first-child {
  border: 1px solid blue;
}

section form:last-child {
  border: 1px solid red;
}
<section>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</section>
dippas
  • 58,591
  • 15
  • 114
  • 126
2

In order to use the first-child and last-child you need to refer to their 'parent' like in the example below.

.container form:first-child {
  border: 1px solid blue;
}

.container form:last-child {
  border: 1px solid red;
}
<div class='container'>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</div>

You can read more about these pseudo selectors on this thread

Kristijan Iliev
  • 4,901
  • 10
  • 28
  • 47
  • 1
    Both answers solve the problem but I think this one explains better why the OP original solution wasn't working. – gwar9 Nov 27 '17 at 14:36
-1

Your second form is not the last child of his parent. last child is script (jsfiddle added this tag.), so you can use:

form:nth-child(2)
// or
form + form
// or
form:last-of-type
// or
form:nth-last-child(2)
DigitCart
  • 2,980
  • 2
  • 18
  • 28