doors doors

nth-child, nth-of-ty...

  • HOME
  • MEMO
  • nth-child, nth-of-type(擬似クラス)が反応しない

nth-child, nth-of-type(擬似クラス)が反応しない

nth-child, nth-of-type を知る

nth(疑似クラス)は知っていると便利ですが、検索などで出てくる情報サイトは、基本が分かっている前提が多いため、自分の記述した状態に反映しようとするとうまく行かないといったこともあります。ということで、備忘録も兼ねて・・・。

あれとこれにだけ、色を付ける

例)XX月XX日(金)・XX日(土)・XX日(日)
といった文字で、曜日の「土」「日」にそれぞれ色を付ける場合(曜日部分だけ少し小さく)


<div>XX月XX日<small>(金)</small>・XX日<small>(<span>土</span>)</small>・XX日<small>(<span>日</span>)</small></div>

といった記述ができます。これにnth-(疑似クラス)を使って「土」「日」それぞれに色を設定します。

この時にソースを縦に記述するとわかり易い

この程度の記述だと1行で書かれていますが、nth-childは「何番目」という指定になりますので、(私が)やってしまいがちなのが

div small span: nth-child(1) { color: blue; }
div small span: nth-child(2) { color: red; }

です。当然、これはNGです。

そこで、nth(擬似クラス)を理解するために、記述を縦に変えてみます。


<div>XX月XX日
<small>
(金)
</small>
・XX日
<small>

<span>土</span>

</small>
・XX日
<small>

<span>日</span>

</small>
</div>

無理矢理感は否めませんが、縦に組んで見てると div small span:nth-child(1) {} というのがNGなのが良く分かります。
divの中のsmallの中のspanは、それぞれ1つずつしか存在しません。spanが何番目ということに囚われてしまうと抜け出せなくなります。

考え方は、spanは何番目のsmallにありますか? です。横に見ているとどうしても span が、スパンが、ルパンが・・・となります。なので、縦にすると親子関係、内包している関係性が見えてくる(私だけ?)。

ということで、答えは、

div small:nth-child(2) span { color: blue; }
div small:nth-child(3) span { color: red; }

です(備忘録を兼ねていますのでご了承ください)。これを踏まえてわかり易く下記に解説しています。

childとtypeの違い

nth-childとnth-of-typeの違いは、childは親に対して何番目の子(タグは親を参照するための要素)なのか。他方、typeはタグを特定することで、そのタグ群の何番目という指定(但し、タグが子だとすると親の括りの外へ出ることはできない)ができます。

画像左がHTML、中央がCSSです。CSSの番目はどちらも2ですが、childの赤とtypeの青の結果がそれぞれ違うことを見てください。どちらも li につけていますが、childはliの親(この場合はul)を参照しています。childがいる親から見て何番目なのかという結果になります。
CSSを見るとliに指定されているように勘違いしますが、あくまでもliを内包する親を参照するための要素になります。そのため、英語群の「A」、日本語群の「あ」がいずれも対象になります。
逆にtypeは、liだけを見て何番目という意味になるので、英語群の「B」、日本語群の「い」が青になります。spanは仲間ではないと判断しています。但し、typeはliだけを見ているわけではなく、childと同様、親のulを飛び越えることはできないので、英語群と日本語群それぞれの2番目となります。

デザイナーも少しは知ってた方がよい?!

WEB制作を担っている以上、多少のHTML・CSSは知っていて損はありません。微調整ができることはWEBデザインをする上で重要ですし、何より自分の思うようにできるのは効率的です。

CSSのハードルを越えるとデザインにも変化が

よくあるのが、WEBコーディングの時点で表現するのが厳しいといったことです。もちろん、時間やコスト、制約を設ければ不可能が可能になることもありますが、PhotoshopやIllustratorでデザインされたままをコーディングする、いわゆるピクセルパーフェクトなコーディングはなかなかのハードルです。しかし、HTMLやCSSのことを知っているだけで、WEBデザインからコーディングへの橋渡しがスムースになります。ということで、日々、勉強です。

関連記事

aspect

要素のアスペクト比(縦横比)を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。 単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に...

wordpress01

サイト構築でCMSをオススメする理由

WEBサイトの管理、どうしていますか? 今やどの企業でさえもWEBサイトを持っているのが当たり前の時代になっています。 しかしWEBサイトを作っただけで満足する...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(index.html)のリンクは <a href="../">トップページ&...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...