#red {
          color: red;
        }
        /*後からclassで指定していますが、上のidの方が優先されます！*/
        .para {
          color: blue;
        }
  

    
      /*クラスを複数指定しているとできる
      class="para red"みたいに*/
         .para {
          font-weight: bold;
        }
         .red{
          color: red;
        }
         .blue{
          color: blue;
        }
         .green{
          color: green;
        }
  

    
      /*point!”>”は指定した子要素のみなので、
      <strong><span>hugahuga</span></strong>は適用されません！
      （孫要素にspanあるけど適用されない）*/
      .green > span{
        color: green;
      }
    /*  ”+”と”~”はややこしい。
        "+"は指定した隣接する要素のみ
        （h2の後ろがpならそれだけが背景色黄色、paragraph2と3-2は適用されない） */
      h2 + p {
        background-color: yellow;
      }
      /* "~"は後ろの兄弟要素全て！（h2の後ろのpは全て斜体になってます） */
      h2 ~ p {
        font-style: oblique;
      }
  

    
      /*クラス属性を持っている全ての要素（この場合はp要素）*/
      [class]{
        background-color: aqua;
      }
      /*a要素のうち、href="#"を持っているもの。
        link2はyoutubeへのリンクになっているので適用外となる*/
      a[href="#"]{
        color: rgb(255, 77, 0);
      }
  

    
      /*インプットをフォーカスしてみてください*/
      #div6 input:focus{
        background-color: yellow;
      }
      /*link1にマウスを置いてみてください*/
      #div6 .blue a:hover{
        color: aquamarine;
      }
      /*link2を押して、その後このページに戻ってきてください*/
      #div6 .green a:visited{
        color:red;
      }
      /*link3訪問前→訪問後*/
      #div6 .add a:link{
        background-color: aquamarine;
      }
      #div6 .add a:visited{
        background-color: red;
      }
  

    
        /*2-7:構造的な擬似要素*/
        /*兄弟関係の要素のうちの最初の要素*/
        li:first-child {
          background-color: #d3d3d3;
        }
        /*兄弟関係の要素のうちの最後の要素*/
        li:last-child {
          background-color: #fcfc98;
        }
        /*『ひとりっ子』要素なら適用
          link2は、pの子要素だが、他にもspanがいて一人っ子ではない*/
        a:only-child {
          background-color: rgb(240, 88, 88);
        }