<p><code class="hljs-title">Last-child</code> - это псевдокласс в CSS, который позволяет выбрать последний элемент определенного типа внутри родителя. Этот псевдокласс полезен, когда нам нужно применить стили только к последнему элементу в группе. Давайте рассмотрим примеры использования <code class="hljs-title">last-child</code>.</p>
<p>HTML код:</p>
<pre><code class="hljs-markup"><div class="container">
<p>Первый параграф</p>
<p>Второй параграф</p>
<p>Третий параграф</p>
<p>Последний параграф</p>
</div>
<ul class="list">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Последний элемент списка</li>
</ul>
</code></pre>
<p>Пример 1: Применение стилей к последнему дочернему элементу в блоке</p>
<pre><code class="hljs-css">.container p:last-child {
color: red;
}
</code></pre>
<p>В этом примере стили будут применены только к последнему параграфу внутри блока с классом "container". Таким образом, цвет текста последнего параграфа будет красным.</p>
<p>Пример 2: Применение стилей к последнему элементу списка</p>
<pre><code class="hljs-css">.list li:last-child {
font-weight: bold;
}
</code></pre>
<p>Здесь стили будут применены только к последнему элементу списка, то есть последнему элементу с тегом "li" в блоке с классом "list". В данном случае, наш последний элемент списка будет иметь полужирный шрифт.</p>
<p>Псевдокласс "last-child" можно комбинировать с другими селекторами, чтобы более точно выбирать элементы. Например, можно использовать комбинированный селектор "nth-child" для применения стилей к последнему параграфу определенного типа:</p>
<pre><code class="hljs-css">.container p:nth-child(2):last-child {
background-color: yellow;
}
</code></pre>
<p>В этом примере стили будут применены только к последнему параграфу в блоке с классом "container", который является вторым параграфом внутри родителя и является последним дочерним элементом. В результате фоновый цвет у этого параграфа станет желтым.</p>
<p>Таким образом, псевдокласс "last-child" позволяет выбирать и применять стили только к последним элементам определенного типа внутри родителя. Это очень полезно для управления внешним видом и расположением элементов на веб-странице.</p>