CSSでよくみる「：（コロン）」ってなんなの？

CSSでハマった。
どっかのサイトをリスペクトしてきて
横並びになった画像が何故か４番目あたりで勝手に改行が入る。
widthの値変えようともうんともすんともいかない。

何故？と思って、ずっとCSSとにらめっこしていたら
多分これだろうと思い、修正かけています。

勉強の為、メモ

・CSSの記述おさらい

HTMLにはid、classって要素があり
それに対し、CSSで調整することができる。

CSSで指定する場合はそれぞれ

id => #（シャープ）
class => .（ドット）

となる。
例として

CSS

ul#testID {
	
}
li.testClass {
	
}

HTML

<ul id="testId">
	<li class="testClass"></li>
	<li class="testClass"></li>
	<li class="testClass"></li>
</ul>

ってことできる。

・では？「：（コロン）」って、なんですか？

idとclassは知っていましたが
今回CSSで見つけたのは、この「：（コロン）」でした。

なんぞ？と思い、ググる。

ググった。
どうやら擬似クラスというものらしい。
今回初めて出会いました。

CSS3の可能性と実践【擬似クラス編】

色々あるっぽい。

今回ハマった擬似クラスは「nth-child()」っていう
擬似クラスでした。

・nth-child()の使い方

親要素のn番目の子要素
という意味らしい。

（°Д°　）？

もう少し詳しく理解しました。

nth-child(n)という感じでCSSファイルに記述しますが
要素が複数ある場合、n値の要素に対し、スタイルを適応する。ということらしい。

やり方はどうするのか。
例えば

CSS

ol li:nth-child(2n) {
  color: green;
}

ol li:nth-child(5) {
  color: purple;
  font-weight: bold;
}

HTML

<ol>
<li>テキスト</li>
<li>テキスト</li> <!-- 緑色になる -->
<li>テキスト</li>
<li>テキスト</li> <!-- 緑色になる -->
<li>テキスト</li> <!-- 紫色になる -->
<li>テキスト</li> <!-- 緑色になる -->
<li>テキスト</li>
<li>テキスト</li> <!-- 緑色になる -->
</ol>