fyrirlestrar/03/daemi/selectors.html

<!doctype html>
<html lang="is">
  <head>
    <meta charset="utf-8">
    <title>Selectors</title>
    <style>
    /* grunn stærð fyrir em er 20px */
    html { font-size: 20px; }

    /* svartur 1px breiður border */
    div { border: 1px solid #000; }

    /* látum öll em vera með rauðan texta */
    em { color: #f00; }

    /* en ef þau eru beint undir div er það blátt */
    div > em { color: #00f; }

    /* div sem er systkini div fær 20px margin fyrir ofan sig */
    div + div { margin-top: 1em; background-color: pink; }

    /* fyrsti stafur undir div.text verður 10px*2=20px */
    div.text:first-letter { font-size: 2em; }

    [foo] { color: yellow; }

    [foo]::after { content: ' foo!'; }

    span:hover { background-color: #0f0; }
    </style>
  </head>

  <body>
    <div>
      <p>Halló <strong id="text">heimur</strong></p>
    </div>

    <div class="text">
      <em>Lorem</em> <span foo="bar">ipsum <em>dolor</em> sit amet</span>, consectetur adipiscing elit.
    </div>

    <div class="text">
      <em>Lorem</em> <span foo>ipsum <em>dolor</em> sit amet</span>, consectetur adipiscing elit.
    </div>
  </body>
</html>