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

CSSWeb DevelopmentFront End Technology

<p>To style every &lt;p&gt; element that is the first child of its parent, use the CSS :first-child selector.</p><h2>Example</h2><p>You can try to run the following code to implement the :first-child selector &minus;</p><p><a class="demo" href="http://tpcg.io/TXg9X4" rel="nofollow noopener noreferrer" 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:first-child { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: 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;h1&gt;Heading&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;This is demo text.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is demo text, with the first child of its parent div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is demo text, but not the first child.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 30-Jun-2020 09:47:59

Advertisements