<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selectors Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="my_jquery_functions.js"></script>
    <style>
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <h1>Welcome to jQuery Selectors</h1>
    <p class="highlight">This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="myButton">Click Me</button>
</body>
</html>
$(document).ready(function() {
    $("p").css("color", "blue");
    $("#myButton").click(function() {
        $(this).hide();
    });
    $("p:first").css("font-weight", "bold");
    $("ul li").css("background-color", "lightgray");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.