Selecting Elements

Using jQuery, you can select elements with ease using CSS selectors.

Basic Selectors

$("p").css("color", "blue"); // Selects all <p> elements and makes text blue
$("#myId").css("background-color", "yellow"); // Selects elements with ID 'myId'
$(".myClass").css("font-size", "20px"); // Selects elements with class 'myClass'

Attribute Selectors

$("input[type='text']").css("border", "1px solid red");

Hierarchical Selectors

$("div > p").css("color", "green"); // Selects direct child <p> elements within a <div>
$("ul li:first-child").css("font-weight", "bold");

Traversing Elements

$("div").find("p").css("color", "green");
$("p").parent().css("border", "2px solid black");
$("p").siblings().css("background-color", "lightgray");