Style every <p> elements that is the last child of its parent with CSS

CSSWeb DevelopmentFront End Technology

<p>To style every &lt;p&gt; elements that is the last child of its parent, use the CSS :last-child selector. You can try to run the following code to implement the :last-child selector</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/JFoptg" rel="nofollow noopener noreferrer" style="" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;p:last-child { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;This is demo text1.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;This is demo text2.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;This is demo text3.&lt;/p&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/8477/styling.jpg" class="fr-fic fr-dib" width="308" height="139"></p>
raja
Updated on 22-Jun-2020 05:58:52

Advertisements