<h2>X[title] Selector</h2>
<div id="aatr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
   </div>

<h2>X[href="foo"] Selector</h2>

<div id="batr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
   </div>

<h2>X[href*="tuts"] Selector</h2>
<div id="catr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum <a href="https://webdesign.tutsplus.com">Tuts+ Web Design+</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
   </div>

<h2>a[href^="http"] Selector</h2>
<div id="datr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
   </div>

<h2>X[href$=".jpg"] Selector</h2>
<div id="eatr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> sit amet, consectetur "<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg">Getting Good with Git</a>" elit, sed do eiusmod tempor. </p>
   </div>

<h2>X[foo~="bar"] Selector</h2>
   <div id="fatr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>

      <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> tempor. </p>
      <p> <a href="http://d2o0t5hpnwv4c1.cloudfront.net/817_rubyNewbies1/preivew.png" data-filetype="image">PNG Image</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum <a href="https://webdesign.tutsplus.com">Tuts+ Web Design</a> sit amet, consectetur "<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-filetype="image">Getting Good with Git</a>" elit, sed do eiusmod tempor. </p>
   </div>

div#aatr-container a[title] {
  color: green;
}

div#batr-container a[href="https://webdesign.tutsplus.com"] {
  color: #49b293;
}

div#catr-container a[href*="tuts"] {
  color: #49b293;
} 

div#datr-container a[href^="http"] {
         color: red;
      }  

div#eatr-container a[href$=".jpg"] {
         color: red;
      } 

div#fatr-container a[data-filetype="image"] {
      color: red;
    }

/* style headings */
h2:not(:first-child) {
  margin: 4rem 0 0 0;
}