定義型リストでdd:first-childしたら効かなくてハマった。そしてddにfirst-childは使えないことが判明した。 | Garney.Web

定義型リストでdd:first-childしたら効かなくてハマった。そしてddにfirst-childは使えないことが判明した。

スポンサーリンク

20150327_1

もうCSSを覚えてから随分と経つ。高校生位の頃に「こんなの無理やろ?!」とか絶対覚えれる気がしなかったのに、今は息をするがごとくスラスラと書くことが出来る。だけども今日は「まじか・・知らんかった・・」みたいな発見があった。first-child擬似クラスについてだ。

今日普通に手打ちしていて、dl dt:first-childは効くのに何故かdl dd:first-childが全く効かず「はい?なんで?」、はいここでパニック。こんな程度のことで躓きたくないのに沼にハマった。だがcssって結構ゴリ押しでも書けるし、どうとでも解決方法がある。だからdl ddにfirst-child出来なくても他の方法はある。例えば代わりにddにclass名を付けてやってそのクラスに対してcssスタイルを当てるとか。まあこんな書き方でも良いのです。でも「嫌だった」これ重要です。嫌だった。なんとかしてdd:first-childしたかった。特に理由はない。だから「スペルミスだろ?どうせ」とか思いながらもう一度書き直したり。dt:first-childがイケないのかと謎の発想でスタイルを消してみたりやったが無理だった。

率直に言おう。

dl dd:first-childは使えない。

そもそも、first-child擬似クラスは、親要素の中で初めに現れる子要素に対してスタイルを適応する。だからdl dd:first-childは大抵の場合ありえない。よくよく考えたら今までul liでそれぞれのリストの左にmarginを入れる際に良くこのfirst-childを使用していた。ul liは適応できる。なぜならul の子要素はliに決まっているからだ。ulの子要素はliであり、初めに現れる子要素は100%liである。だから絶対にfirst-childは効く。スペルミスしていないかぎりな。

話をdl ddに戻す。例えばこんな定義型リストがあるとする。

<br />
&lt;dl&gt;<br />
    &lt;dt&gt;&lt;/dt&gt;<br />
    &lt;dd&gt;&lt;/dd&gt;<br />
    &lt;dt&gt;&lt;/dt&gt;<br />
    &lt;dd&gt;&lt;/dd&gt;<br />
    &lt;dt&gt;&lt;/dt&gt;<br />
    &lt;dd&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />

定義型リストはdlの直下にdtとddを記述することができるので大抵の場合はこんな感じになると思う。ここでdl dt:first-childとすると、dlが親要素でこの中で初めに現れる子要素はdtなのでfirst-childは適応される。しかしdd:first-childはどうだろうか。dlの中で初めに現れる子要素はやっぱりdtなので適応されない。こういう罠だ。だから

<br />
&lt;dl&gt;<br />
  &lt;dd&gt;&lt;/dd&gt;<br />
  &lt;dt&gt;&lt;/dt&gt;<br />
  &lt;dd&gt;&lt;/dd&gt;<br />
  &lt;dt&gt;&lt;/dt&gt;<br />
  &lt;dd&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />

こんなのなら適応される。っていうかdtすっとばしてdd書いていいんかな。こういう書き方は自分はしないので文法的に微妙なところなのだが。とりあえずこう書けば適応されるが推奨しない。んじゃーどうすれば・・こうしよう。HTMLはそのままでcssに変更を加える。

<br />
dl dt:first-child + dd<br />

こう書けば適応される。簡単に説明するとdlの中で初めに現れる子要素dtから見た姉弟要素・・・というかdtの隣にある要素ddにスタイルを適応する。こうすれば問題なし。
こんなことで時間を取られた。あーしょうもな!よく今までコレ知らずにハマらずに来たなと思った。また1つお利口さんになってしまったわ・・・

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法