<body>
<H1> a heading 1 </ h1>
<H1 style = "display: none"> a Title 2 </ h1>
<H1> a title 3 </ h1>
<ul class="list">
<li>html</li>
<li class="red">javascript</li>
<li>php</li>
<li>css</li>
<li class="red">mysql</li>
<li>python</li>
</ul>
<ul class="list">
<li>link1</li>
<li></li>
<li>link3</li>
<li></li>
<li>link5</li>
<li>link6</li>
</ul>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div id="cont">4</div>
<div id="cont">5</div>
<div id="cont">6</div>
<div class="msg">
<div class="xbox">
<H2> subheadings 2-1 </ h2>
<H2> subheadings 2-2 </ h2>
</div>
<H2> subheadings 1-1 </ h2>
<H2> subheadings 1-2 </ h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input type="text" name="user">
<input type="text">
<input type="password" name="user">
</body>
<script src="../jquery.js"></script>
<script>
// $();
// ID blindness properties
// $("#cont").css("background","red");
// $(".box").css("background","red");
// $("span").css("background","red")
// $(".msg h2").css("background","red")
// $(".msg").find("h2").css("background","red")
// $(".msg>h2").css("background","red")
// $(".msg").children("h2").css("background","red")
// $(".msg+span").css("background","red")
// $(".msg").next("span").css("background","red")
// $(".msg~span").css("background","red")
// $(".msg").nextAll("span").css("background","red")
// $("input[type=text][name]").css("background","red")
// css selectors
// combination you find ... more
// $(".list li:first").css("background","red")
// $(".list li").first().css("background","red")
// $(".list li:last").css("background","red")
// $(".list li").last().css("background","red")
// $(".list li:eq(3)").css("background","red")
// $(".list li").eq(3).css("background","red")
// $(".list li:odd").css("background","red")
// $(".list li").odd().css("background","red") ×
// $(".list li:even").css("background","red")
// $(".list li:not(.red)").css("background","red")
// $(".list li").not(".red").css("background","red")
// $(".list li:contains(j)").css("background","red")
// $(".list li").contains("j").css("background","red") ×
// $(".list li:empty").css("background","red")
// empty (), is not an option, is used to empty the contents of the current DOM element
// $(".list li").empty();
// $(".list:has(.red)").css("background","red")
// $(".list").has(".red").css("background","red")
// $("h1:hidden").css("display","block")
// $("h1:visible").css("display","none")
</script>