CSS Selectors

selectors grab onto:

tags

<a>, <p>, <div>, <table>, <tr>, <td>, <span>, <select>, <option> 

tags open and close

<div>
  <p> text </p>
  <table>
    <tr>
      <td>
    </tr>
  </table>
</div>

<div class="error">
  <p> Something <span class='massive'>went</span> wrong! </p>
</div>

<br>

<p> word</p><br>
word

attributes

<a href="www.google.com">
<span class="red">
<div class="footer small">
<option value="option1">
<table id="results_table">
<input type="checkbox">

to grab a class: ".classname"

<div class='error'>
css=.error

to grab an id: "#google_link"

<a id='google_link' href='www.google.com'>

css=#google_link

to grab more than one class: ".classone.classtwo"
<div class="classone classtwo">

css=.classone.classtwo

to grab an attribute: "a[href='www.google.com']"
<a href="www.google.com"></a>

to grab ALL instances of a tag: "div"
<div></div>   //grabs
  <p>
<div>         //grabs
<div></div> //grabs
</div>

to grab a tag with a specific class: "div.classname"

to grab the direct child of an element: "div > p"
  <div>
    <p> text! </p> // grabs this element
  </div>

to grab a descendent: "div p"
  <div>
    <div>
      <p> text! </p> // grabs this element
    </div>
  </div>

to grab a sibling: p + p
  <div>
    <p></p>
    <p></p> // grabs this element
  </div>

getting more specific: #first_item p

  <ul>
    <li id='first_item'>
      <div>
        <p> text </p>  //grabs
      </div>
    </li>

    <li>
      <p> text </p>   //does NOT grab. why?
    </li>
  </ul>

:nth-of-type() -- li:nth-of-type(3)
  <ul>
    <li> </li>
    <li> </li>
    <li> </li>  //grabs
    <li> </li>
  </ul>

:first-of-type  -- li:first-of-type
  <ul>
    <li> </li>  //grabs
    <li> </li>
    <li> </li>
    <li> </li>
  </ul>

:first-child -- ul > :first-child
  <ul>
    <li> </li>  //grabs
    <li> </li>
    <li> </li>
    <li> </li>
  </ul>

:nth-child() -- ul > nth-child(3)
  <ul>
    <li> </li>
    <li> </li>
    <li> </li>  //grabs
    <li> </li>
  </ul>

  :nth-child -- p:nth-child(1) -- what happens?

  <div>
    <div> </div>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>

to grab a parent, ancestor: whoops! can't do that with css. we need xpath

Exercises

1. grab all paragraphs on page
2. grab the -very first- paragraph on the page
3. grab the fourth element in the form. what is it?
4. what is the third element in the form? do you see it?
5. grab the option with the value 'dog'
6. find the checkbox
7. select the entire page