日: 2015年3月7日

cssセレクタで悩んだら

http://weblightenment.com/%E7%96%91%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9first-child%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E6%99%82%E3%81%AE%E8%A7%A3%E6%B1%BA%E6%B3%95/

<div>
<h2>見出し</h2>
<section>
テキストテキストテキスト
</section>
<section>
テキストテキストテキスト
</section>
</div>
ここで私はdivに含まれている初めのsectionにだけmargin-rightを効かせたかった。
そこで私ははいつものように

div{overflow:hidden;}
div section{float:left;}
div section:first-child{margin-right;}
てな具合で記述した。
がしかし効かない。
ので調べてみると、first-childという疑似クラスは親要素（この場合div）の一番初めに記述されているのが、h2なのでsectionタグは一番初めのタグではないから効かないということらしい。

ではこの場合どうしたらよいか。。。

隣接セレクタを使う

つまり

div>h2+section{margin-right:10px;}
とする。これでdivの子要素でh2の次のsectionタグを指定したことになる。

ちなみにsectionタグの次のsectionを指定したい時は

div>section+section{margin-right:10px;}
と記述する。

ちなみにこれらを教えてくれたのは

http://web-dd.net/?p=278

です。有難う。

疑似クラスにはまだまだいろいろなぞがありそうなので、今後より詳しく調べておこうと思う。

ＣＳＳ3の出現によって疑似クラスも増えたし。ただブラウザによって機能しないものがまだまだあるようだ。。。

ちなみにfirst-childもＩＥ6には対応していない。

ちなみに下のサイトいろいろ見やすくていい

http://w3g.jp/css/guide/pseudo

親カテゴリ指定して　小カテゴリ別に記事一覧　つまり　welcart の商品一覧カテゴリ別

<?php
 //親のIDをget_termsへ
$args = array('child_of' => 97);
//子ターム一覧を取得
$dterms=get_terms('category',$args);
?>
   

<?php 	
foreach ( $dterms as $dterm ):
?>


<!--★★★ループ基本-->
<?php
if ( have_posts () ) :
    while ( have_posts() ) :
        the_post();
?>
商品
<?php
    endwhile;
endif;
?>
<?php wp_reset_query(); ?>



<?php endforeach; ?>