how to use last child properly

Question

I try to do simple modification in last paragraph but using pseudo class such as last-child doesnt work at all. I have paragraph in body and I would like to use last child. I know I can use last of type but I dont know why I cannot use last-child.

      
      p:last-child {
        font-style: italic;
        text-align: center;
        color:blue;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>excercise</title>
    <style>
      
      html {
        font-family: roboto, sans-serif;
      }
    </style>
  </head>
  <body>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium
        perferendis soluta dicta amet deleniti deserunt id tenetur illum tempora
        similique necessitatibus, nisi laboriosam quos veniam voluptates itaque,
        fugit reiciendis eveniet!
      </p>

      <p class="italic">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, modi
        tempora dolores impedit ratione repellat minus eum et magni. Esse, rem
        eaque. Eius itaque odio asperiores quos explicabo voluptates
        consequuntur!
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum enim,
        aperiam sint tempore incidunt, quidem fugiat dignissimos quibusdam eaque
        distinctio praesentium et minima harum. Deserunt accusantium nobis aut
        ex quidem.
      </p>
    </body>
  
</html>

How about this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-child — KIKO Software, May 29 '22 at 20:56
@KIKOSoftware Do yourself a favor. Just don't go to w3schools. One of the worst websites to go learn development from. Still at this date. — Roko C. Buljan, May 29 '22 at 21:00
@RokoC.Buljan There's nothing wrong with the example, but yes, I've seen some weird things on w3schools. — KIKO Software, May 29 '22 at 21:06
I agree that the "some" examples might seem fine. And they did some good steps. Overall it's a huge mess. We fight **daily** with questions of code inherited directly or indirectly from their teachings. Not a community driven website. Bad practices. Useless certificates. Just sad given their position in the google results. @KIKOSoftware — Roko C. Buljan, May 29 '22 at 21:13
There are quite a few questions I've resolved that derived from bad examples taken from w3schools. I always end up warning novices to avoid it until they know what bad code "smells" like. — zer00ne, May 29 '22 at 21:15

score 3 · Answer 1 · answered May 29 '22 at 20:57

The stackoverflow live demo widget injects a script element and a div to show the console before the end of the body, so the p is not the last child.

Wrap it in another element so it is the last child in its container.

p:last-child {
  font-style: italic;
  text-align: center;
  color: blue;
}

<div>

  <p class="italic">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, modi tempora dolores impedit ratione repellat minus eum et magni. Esse, rem eaque. Eius itaque odio asperiores quos explicabo voluptates consequuntur!
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum enim, aperiam sint tempore incidunt, quidem fugiat dignissimos quibusdam eaque distinctio praesentium et minima harum. Deserunt accusantium nobis aut ex quidem.
  </p>
</div>

how to use last child properly

1 Answers1