HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>article p:first-of-type</title>



  <style>



    body { font-family: sans-serif; padding: 16px; max-width: 40rem; }



    article { margin-bottom: 1.5rem; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; }



    h2 { margin: 0 0 8px; font-size: 1.1rem; }



    p { margin: 0 0 8px; line-height: 1.5; }



  </style>



</head>



<body>



  <article>



    <h2>News</h2>



    <p>Lead paragraph for the news article.</p>



    <p>Second paragraph with more detail.</p>



  </article>



  <article>



    <h2>Tutorial</h2>



    <p>Opening paragraph for the tutorial.</p>



    <p>Follow-up paragraph.</p>



  </article>



  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



  <script>



    $("article p:first-of-type").css({



      fontSize: "1.125rem",



      color: "#334155"



    });



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

article p:first-of-type — lead paragraph (Try It)