【基本】CSS３構造疑似クラスchild系 - Webデザインの勉強と日常-honamama.net

今回はCSS３で追加された、疑似クラスです。以前からあった:first-child（最初の子要素）に加え最後の子要素やn番目の子要素などバリエーションが増えています。
疑似クラスを使うメリット
＞　余計なHTMLの記載を減らすことにつながる
＞　使いまわせるCSSとなる
ところかな？と思います。

デメリットとしては、
＞　覚えないといけない(笑)ところですかね。
＞　HTML構造を変えると、合わせてCSSが効く場所が変わり、思ってたデザインじゃなくなってる！
となる恐れがあるところです。
ただ、基本的にHTML構造がしっかりできて、CSSを書き出す流れをしっかり守れば大丈夫です。
さて、疑似クラスやっていきましょう。

すべての子要素「～child」系の疑似クラス
1. 「半角空白」に気を付けて
同じ階層にあるすべての子要素が該当になる疑似クラス「~child」
まとめ

すべての子要素「～child」系の疑似クラス

子要素の見本として今回はul>li>aを使ってグローバルナビゲーションを例に使っていこうと思います。

ここではAboutページのグローバルナビゲーションとしています。

下線を入れるぐらいの方がシンプルになりそうですが、練習なので極端なデザインでわかりやすくしています。

コードはこちら
bodyにidをつけて、ページに名前を付けています。


<body id="about">

<nav id="g_nav">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</li>
    <li><a href="news.html">News</li>
    <li><a href="gallery.html">gallery</li>
    <li><a href="access.html">Access</li>
    <li><a href="contact.html">Contact</li>
  </ul>
</nav>
</body>
ここからCSSとなります。
/*リセット*/
* {/*全称セレクタをつかって、デフォルトの余白を消す。*/
    margin: 0;
    padding: 0;
}
ul {/*初期値の・を消す。*/
    list-style-type: none;
}
/*ここからナビゲーションの装飾*/
ul {
    display: flex;　/*横並びにする親にflex*/
    justfy-contents: space-between;　/*両端詰めの均等配置*/
    text-align: center;　/*文字はセンタリング*/
}
li {
    flex-grow: 1;　/*flexの子に余った隙間を均等に振り分ける*/
    background: #4E00B0;　/*背景色*/
}
a {
    display: block;　/*ブロックにして領域をliと同じにする。*/
    text-decoration: none;　/*下線を消す。*/
    padding: 10px;　/*上下左右に余白を入れて高さをつくる。*/
    color: #fff;　/*文字色*/
}
#about nav li:nth-child(2) a {
    background: #D70087;
}

＃about nav li:nth-child(2) a」　とは、
「Aboutページのナビゲーションの中、２番目の子供（２番目のli）のa要素」
に対して背景色を変える。という指定をしています。

「半角空白」に気を付けて

半角空白の有無で指定場所が変わります。
「＃about nav li:nth-child(2) a」liと：の間は半角空白なしなので
「Aboutページのnavの２番目のli」となります。（ul省略）
次のように「＃about nav :nth-child(2) a」navと：の間に半角空白をいれてみます。
そうすると、「Aboutページのnavより下の階層の２番目の子供要素の中のa要素」となる。
つまり、navの中にはulが１つしかない。＝２番目がないため対象外
　　　　navの子孫、liが複数ある＝この要素の２番目だ！
ということになる。
なぜ、：nth-child効かないのか？と悩んだら、半角空白をまずは確認しましょう。

では、応用です。


#top nav :nth-child(1) a,
#about nav :nth-child(2) a,
#news nav :nth-child(3) a,
#gallery nav :nth-child(4) a,
#access nav :nth-child(5) a,
#contact nav :nth-child(6) a,
	{
    background: #D70087;
}

このようにグループセレクタをしてあげると、背景色の指定は１度で変更可能ですし、全てのページで適用されるため便利に使うことができます。

同じ階層にあるすべての子要素が該当になる疑似クラス「~child」

:first-child（CSS2.1）　　→　一番最初の子
:last-child　　　　　　　 →　一番最後の子
:nth-child(n)　　　　　　→　ｎ番目の子
:nth-last-child(n)　　　　→　後ろからｎ番目の子
:only-child　　　　　　　→　唯一の子

:nth-child(n)は数字以外にも
:nth-child(even)で偶数番目の子
:nth-child(odd)で奇数番目の子とすることも可能ですし、
:nth-child(２n)で２かけるｎとなり偶数番目の子となり、
:nth-child(２n＋１)で偶数＋１で奇数番目の子となります。
メンテナンスしやすいコードになりますのでぜひ、覚えてみてください。

同じ要素のみをカウントする～of type系の疑似クラスもありますが、初心者では混乱するのでまずは、～child系疑似クラスから活用してみてください。