div {
      width: 350px;
      /*height: 25px;*/
      background-color: greenyellow;
      margin-bottom: 10px;
    }
    #idMedia { height: 100px; }
    @media screen and (min-width: 640px) {
      #idMedia { height: 50px; }
    }
    #idAsterisk > * {
      background-color:bisque;
      margin:7px;
    }
    .clsDiv {
      background-color:aqua;
    }
    #idDescent span {
      font-weight: bold;
    }
    #idChild > span {
      font-weight: bold;
    }
    #idPlus + p {
      font-weight: bold;
    }
    [title] {
      font-weight: bold;
    }
    [href="/"] {
      font-weight: bold;
    }

  <div id="idMedia">
    @media screen and (min-width: 640px)
  </div>
  <div id="idAsterisk">
    * {} スタイルシート上は #idAsterisk > * {}
    <p>p要素</p>
    <span>span要素</span>
  </div>
  <div id="idHash">
    # ID
  </div>
  <div class="clsDiv">
    . クラス
  </div>
  <div id="idDescent">
    <span>Space 小孫</span>
  </div>
  <div id="idChild">
    <span>&gt; 個</span>
    <p><span>これは孫なので範囲外</span></p>
  </div>
  <div>
    <p id="idPlus">#idPlus + p</p>
    <p>+ 隣接</p>
  </div>
  <div title="これがタイトル">
    [] タイトル(title)があります
  </div>
  <div>
    <a href="/">[=""] / に戻る</a>
  </div>

    #idLink a:link {
      color: red;
    } #idLink a:visited {
      color: blue;
    }
    #idUi1 p:hover {
      font-weight: bold;
    }
    #idUi1 input:focus {
      background-color: orange;
    }
    #idUi2 input:enabled {
      background-color: gold;
    }
    #idUi2 input:disabled {
      background-color: gray;
    }

  <div id="#idLink">
    :link と :visited
    <a href="/">/</a>
    <a href="/none.html">/none.html</a>
  </div>
  <div id="idUi1">
    <p>#idUi1 p:hover</p>
    <input type="text" name="text1" value="#idUi1 input:focus" size="20">
  </div>
  <div id="idUi2">
    :enabled <input type="text" name="text2" value=":enabled" size="20">
    :disabled <input type="text" name="text3" value=":disabled" size="20" disabled>
  </div>

    #idOrder p:first-child {
      color: red;
    }
    #idOrder p:last-child {
      color: blue;
    }
    #idOrder p:nth-child(3) {
      color: magenta;
    }
    #idTypeOrder p:first-of-type {
      color: red;
    }
    #idTypeOrder p:last-of-type {
      color: blue;
    }
    #idTypeOrder p:nth-of-type(3) {
      color: magenta;
    }
    #idBeforeAfter p:before {
      content: "☆★";
    }
    #idBeforeAfter p:after {
      content: "★☆";
    }

  <div id="idOrder">
    <p>#idOrder p:first-child p最初</p>
    <p>p ２番目</p>
    <p>p ３番目</p>
    <p>#idOrder p:last-child p最後</p>
  </div>
  <div id="idTypeOrder">
    <span>span</span>
    <p>#idTypeOrder p:first-child p最初</p>
    <p>p ２番目</p>
    <p>p ３番目</p>
    <p>#idTypeOrder p:last-child p最後</p>
    <span>span</span>
  </div>
  <div id="idBeforeAfter">
    <p>:beforeと:after</p>
  </div>