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

けつあご日記

こんちは.菊地です.なんか浅ーいことをいろいろ書きます

CSSセレクタの区切りは何個でもいいっぽい【なれない日記20160710】

なれない日記 CSS


昨日言っていた余白のおかしい目次を直す.
www.ketsuago.com

階層が若干複雑で少し悩んでしまった.例えばこんな感じ.(BibTeXの使い方/参考文献の形式を変更するお(bstファイルの編集) - けつあご日記より)

<ol>
  <ol class="chapter">
    <li><a href="#section0">BibTeXとbstとbib</a></li> <!--ココ-->
    <ol class="chapter">
      <li><a href="#section1">bstファイル</a></li>
      <li><a href="#section2">bibファイル</a></li>
      <li><a href="#section3">Mendeleyの利用</a></li>
    </ol>
    <li><a href="#section4">基本的な使い方</a></li> <!--ココ-->
    <li><a href="#section5">自力で形式を変更する</a></li> <!--ココ-->
    <ol class="chapter">
      <li><a href="#section6">① 著者名を”ファーストネームの頭文字.ミドルネームの頭文字.ファミリーネーム.”にする</a></li>
      <li><a href="#section7">② タイトルを出力しないようにする</a></li>
      <li><a href="#section8">③ 出版年,巻数,ページ数を並べ替える</a></li>
      <li><a href="#section9">④ 出版年を太字にする</a></li>
      <li><a href="#section10">⑤ 出版月を出力しないようにする</a></li>
      <li><a href="#section11">⑥ ページ数の前のコロンをカンマにする</a></li>
    </ol>
    <li><a href="#section12">jecon.bstを利用する</a></li> <!--ココ-->
    <li><a href="#section13">makebstを利用する</a></li> <!--ココ-->
    <li><a href="#section14">まとめ</a></li> <!--ココ-->
  </ol>
</ol>

"ココ"に示されたところの余白を調節したい.どうやって指定するか.うーむちょっとややこしくなるだけで頭がこんがらがる...無能だ...

「ol直下ではじめに出てくるol.chapter直下のli」でよいはず...

ol > ol.chapter:first-child > li {
    line-height: normal;
    padding: 10px 0 0 0;
}

一応出来た.セレクタの区切りは勝手に1つまでと思っていたが,2つ以上でも問題ないようだ.そりゃそうか.

ol.chapterのolは明示しなくても同じだろう.

ol > .chapter:first-child > li {
    line-height: normal;
    padding: 10px 0 0 0;
}

いろいろいじっていたら以下でも同じ挙動をすることがわかった.そうか ol > なんて書かなくても,他のところに.chapterなんてないから.chapter:first-childで十分なのか.

.chapter:first-child > li {
    line-height: normal;
    padding: 10px 0 0 0;
}

結局区切り1つで実現できてしまったが,2つでも問題ないってことは覚えておこう.もしかしたら読みやすくするため(もしくは予め限定的にするため)にあえて明示的に2つ以上の区切りで書いておくなんてこともあるのだろうか?くっそ.メンターがほしい...


明日も時間があればCSSを直していきたい.このブログのCSSはコピペしまくって作られたのでヤバイ箇所がいっぱいありそう.りふぁくたりんぐしていかなければ.はてなブログのCSSって編集しにくくてつらいんだよなぁ.たぶん良いツールがあるはずだから探してみるか?



↓アフィカスリンク

CSSシークレット ―47のテクニックでCSSを自在に操る

CSSシークレット ―47のテクニックでCSSを自在に操る