読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

CSSでよくみる「:(コロン)」ってなんなの?

CSS3

スポンサードリンク

CSSでハマった。
どっかのサイトをリスペクトしてきて
横並びになった画像が何故か4番目あたりで勝手に改行が入る。
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>

ということになるらしいです。

えーと。

なにこれ!!?(°Д° )!!?
むっちゃべんりやんけ!

どうやら足し算(?)もできるっぽいです。

nth-child(5n+1)
nth-child(5n-1)

こんな感じで記述することが可能です。

私、HTMLとCSSってDivとfloat:leftとposition:absoluteだけ覚えれば
いいと思っていました。。。
反省して、勉強したいと思います。