CODEWITHSUNDEEP
csscss-selectorspseudo-element
Edgar
Edgar

Reputation: 927

CSS pseudo selector. Select last <p>

This is my code:

<section id="return-home-to">
   <div class="gutter">
    <h2 class="return-home-heading">
     Возвращайтесь в дом, свободный от хлопот
    </h2>

    <img src="img\icons\letter.png" alt="" class="icon" />
    <p>
     ПОЧТА ОТПРАВЛЕНА
    </p>

    <img src="img\icons\tape.png" alt="" class="icon" />
    <p>
     ОДЕЖДА И ОБУВЬ ОТРЕМОНТИРОВАНА
    </p>

    <img src="img\icons\lawn.png" alt="" class="icon" />
    <p>
     СПЕЦИАЛЬНЫЕ ЗАПРОСЫ
    </p>

    <img src="img\icons\dishes.png" alt="" class="icon" />
    <p id="last">
     ПОРЯДОК ДОМОВОГО: КРОВАТИ ЗАСТЕЛЕНЫ И ПОСУДА ПОМЫТА
    </p>

    <div class="info">
     <div class="triangle">
     </div>
     <div class="square">
      <a href="#">i</a>
     </div>
    </div>

    <a href="#" class="sq-outline-btn">ПОРУЧИТЬ ЗАДАНИЯ</a>
   </div>
  </section>

I want to select last <p> (which has id="last") using a css pseudo selector "last-child" like this: #return-home-to p:last-child {}.

Question: What am I doing wrong? Why #return-home-to p:last-child {} does not select last <p id="last">?

Upvotes: 1

Views: 393

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240948

Why #return-home-to p:last-child {} does not select last <p id="last">?

Nothing is selected because the last child isn't a p element.

In this case, the the last child of #return-home-to is an anchor element with the class sq-outline-btn, which explains why the p element isn't selected.

If you want to select the last element based on its type, use the :last-of-type pseudo class instead. As the name implies, it will select the last element of a specific type.

#return-home-to p:last-of-type {}

Upvotes: 2

Related Questions