CODEWITHSUNDEEP
css
rmnn
rmnn

Reputation: 11

How to select last element in whole body using css?

How can I select the latest paragraph in my body if I have two more divs? I tried with the last-child, last-type but it selects Paragraph 3, Paragraph 8, and Paragraph 10. I need to select only paragraph 10 and make it italic.

<body>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
<a href="https://www.google.com/">Google</a>
<a href="https://www.google.com/doodles">Google Doodles</a>
<a href="https://www.link-group.eu/" target="_blank">Goto Link Group</a>
<div id="first-div">
    <h2>Subheading</h2>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div id="second-div">
        <h3>Sub subheading</h3>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
        <p>Paragraph 8</p>
    </div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

Upvotes: 1

Views: 726

Answers (2)

nagendra nag
nagendra nag

Reputation: 1332

body direct child and last paragraph element.

so, we can use body > p:last-of-type

body > p:last-of-type{
    background: #ff0000;
}
<!DOCTYPE html>
<html>

<head> </head>

<body>
    
    <h1>Main Heading</h1>
    <p>Paragraph 1</p>
    <a href="https://www.google.com/">Google</a>
    <a href="https://www.google.com/doodles">Google Doodles</a>
    <a href="https://www.link-group.eu/" target="_blank">Goto Link Group</a>
    <div id="first-div">
        <h2>Subheading</h2>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <div id="second-div">
            <h3>Sub subheading</h3>
            <p>Paragraph 4</p>
            <p>Paragraph 5</p>
            <p>Paragraph 6</p>
            <p>Paragraph 7</p>
            <p>Paragraph 8</p>
        </div>
    </div>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
</body>

</html>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

This does the trick.

body>p:last-of-type {
  color: red;
}
<h1>Main Heading</h1>
<p>Paragraph 1</p>
<a href="https://www.google.com/">Google</a>
<a href="https://www.google.com/doodles">Google Doodles</a>
<a href="https://www.link-group.eu/" target="_blank">Goto Link Group</a>
<div id="first-div">
  <h2>Subheading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <div id="second-div">
    <h3>Sub subheading</h3>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
  </div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

Upvotes: 1

Related Questions