https://training-course-material.com/index.php?action=history&feed=atom&title=CSS_Selectors
CSS Selectors - Revision history
2026-05-14T01:15:02Z
Revision history for this page on the wiki
MediaWiki 1.45.1
https://training-course-material.com/index.php?title=CSS_Selectors&diff=61200&oldid=prev
Ksolis at 07:31, 2 October 2017
2017-10-02T07:31:11Z
<p></p>
<p><b>New page</b></p><div>selectors grab onto:<br />
===tags===<br />
<nowiki><a>, <p>, <div>, <table>, <tr>, <td>, <span>, <select>, <option> </nowiki><br />
<br />
tags open and close<br />
<source lang="html5"><br />
<div><br />
<p> text </p><br />
<table><br />
<tr><br />
<td><br />
</tr><br />
</table><br />
</div><br />
<br />
<div class="error"><br />
<p> Something <span class='massive'>went</span> wrong! </p><br />
</div><br />
<br />
<br><br />
<br />
<p> word</p><br><br />
word<br />
</source><br />
<br />
===attributes===<br />
<source lang="html5"><br />
<a href="www.google.com"><br />
<span class="red"><br />
<div class="footer small"><br />
<option value="option1"><br />
<table id="results_table"><br />
<input type="checkbox"><br />
</source><br />
<br />
to grab a class: ".classname"<br />
<nowiki><br />
<div class='error'><br />
css=.error<br />
</nowiki><br />
<br />
to grab an id: "#google_link"<br />
<nowiki><a id='google_link' href='www.google.com'></nowiki><br />
<br />
css=#google_link<br />
<source lang="html5"><br />
to grab more than one class: ".classone.classtwo"<br />
<div class="classone classtwo"><br />
<br />
css=.classone.classtwo<br />
<br />
to grab an attribute: "a[href='www.google.com']"<br />
<a href="www.google.com"></a><br />
<br />
to grab ALL instances of a tag: "div"<br />
<div></div> //grabs<br />
<p><br />
<div> //grabs<br />
<div></div> //grabs<br />
</div><br />
<br />
to grab a tag with a specific class: "div.classname"<br />
<br />
to grab the direct child of an element: "div > p"<br />
<div><br />
<p> text! </p> // grabs this element<br />
</div><br />
<br />
to grab a descendent: "div p"<br />
<div><br />
<div><br />
<p> text! </p> // grabs this element<br />
</div><br />
</div><br />
<br />
to grab a sibling: p + p<br />
<div><br />
<p></p><br />
<p></p> // grabs this element<br />
</div><br />
<br />
getting more specific: #first_item p<br />
<br />
<ul><br />
<li id='first_item'><br />
<div><br />
<p> text </p> //grabs<br />
</div><br />
</li><br />
<br />
<li><br />
<p> text </p> //does NOT grab. why?<br />
</li><br />
</ul><br />
<br />
:nth-of-type() -- li:nth-of-type(3)<br />
<ul><br />
<li> </li><br />
<li> </li><br />
<li> </li> //grabs<br />
<li> </li><br />
</ul><br />
<br />
:first-of-type -- li:first-of-type<br />
<ul><br />
<li> </li> //grabs<br />
<li> </li><br />
<li> </li><br />
<li> </li><br />
</ul><br />
<br />
:first-child -- ul > :first-child<br />
<ul><br />
<li> </li> //grabs<br />
<li> </li><br />
<li> </li><br />
<li> </li><br />
</ul><br />
<br />
:nth-child() -- ul > nth-child(3)<br />
<ul><br />
<li> </li><br />
<li> </li><br />
<li> </li> //grabs<br />
<li> </li><br />
</ul><br />
<br />
:nth-child -- p:nth-child(1) -- what happens?<br />
<br />
<div><br />
<div> </div><br />
<p> </p><br />
<p> </p><br />
<p> </p><br />
</div><br />
</source><br />
to grab a parent, ancestor: whoops! can't do that with css. we need xpath<br />
<br />
===Exercises===<br />
# grab all paragraphs on page<br />
# grab the -very first- paragraph on the page<br />
# grab the fourth element in the form. what is it?<br />
# what is the third element in the form? do you see it?<br />
# grab the option with the value 'dog'<br />
# find the checkbox<br />
# select the entire page</div>
Ksolis