Selecting with jQuery is very similar to querySelectorAll, in that we provide a CSS style selector and jQuery will return all matching elements
//to select all img tags
$("img")
//to select all elements with class 'sale'
$(".sale")
//to select element with id "bonus"
$("#bonus")
//to select all a tags inside of li's
$("li a")
We select and then manipulate
The .css() method is jQuery's interface to styling.
//select elem with id "special" and give it a border
$("#special").css("border", "2px solid red");
//we can also pass in an object with styles
var styles = {
backgroundColor : "pink",
fontWeight: "bold"
};
$("#special").css(styles);
We select and then manipulate
//select all li's and make them yellow
$("li").css("color", "yellow");
//select all elements with class "big"
//and give them an orange border
$(".big").css("border", "1px dashed orange");
We can style multiple elements at once
<div>Div 1</div>
<div class="highlight">Div 2</div>
<div id="third">Div 3</div>
<div class="highlight">Div 4</div>
Use the following starter HTML: