CSS3 疑似クラスの指定方法

[loading shortcode…]

疑似要素とは

まず、擬似ってどういう意味？　と思った方には　↓
※疑似とは ：　区別のつけにくいほどよく似ていること
CSS３で追加された疑似要素、擬似クラスと疑似セレクタに分けて覚えると把握しやすいですね！

疑似クラスと疑似セレクタの違い

疑似クラスとは　ある要素の状態を指定するときに使う
疑似セレクタとは　一部を指定するとき（一部の要素を指定したいとき）に使う
種類は沢山あって、いくつか例を挙げると
p:first-line　｛
color: #000;
}
/* 最初の1行だけ色を変えたいとき*/
p:before {
content: "-->" ;
}
p:after {
content "<--" ;
}
/*文書中に <– –> を挿入したいとき */
コロンを使って2つ以上のプロパティを指定する書き方が特徴的です。
ちなみに

<!-- -->

はHTMLで表示させたくない文字を入力する時に使います。

nth-childの使い方(親要素と子要素のスタイリング）

CSSでスタイリングする際、レイアウトが複雑だと親要素と子要素が出現します。
その場合に端的に描く方法として、nth-childを使うことになります。

nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。

セレクタという言葉、久しぶりに出て来ました。　要素を指定する記号のことでした。
要は1ページのレイアウトにおいて、似たようなカラム（行）を複数作りたいときに便利でなプログラムで、
意味は、n – number, th – （n）番目のということになります。

nth-childをスタイルに追加するだけで、新しくクラスを追加したりせずともスタイルを指定できるというわけです。

人間関係と同じで、誰か人の要素(力など）を利用させていただくとスピードアップしますよね。その理屈と同じ。

今回はドットインストールで教わったコード、ほぼそのままです。

レイアウトはセクションを3つ作って、ハンバーガーメニュー(Font Awesome)をつけ、レスポンシブデザインにしました。
3つあるセクションをストライプにします。
HTML

 <section class="features">
     <h2>Features</h2>
      <div class="container">
        <img src="img/bar_6.jpg">
        <p>hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.</p>
      </div>
   </section>
    <section class="news">
      <h2>News</h2>
        <div class="container">
          <img src="img/bar_4.jpg">
          <p>hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.</p>
        </div>
     </section>
    <section class="how-to-use">
       <h2>How To Use</h2>
        <div class="container">
          <img src="img/bar_5.jpg">
          <p>hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.</p>
        </div>
    </section>

CSS

section:nth-child(even) {
   background: orange;
}

参考： https://techacademy.jp/magazine/8651
https://dotinstall.com/lessons/basic_responsivewebdesign/39306