人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSセレクタ?の質問です。
tableにクラス名kurasuを付けて、そのkurasuの付いた最後のtableに処理をしたいと思っています。
table.kurasu:last-childという風に指定できないようなのですが、正解をおしえてください。

●質問者: khaie
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● LLマン
●25ポイント
<html>
<head>

 <title>CSS Sample</title>
 
 <style type="text/css">
 table.mytable:last-child {background-color:#00aaff;}
 </style>
 
</head>
<body>

 <table class="mytable">
 <tr>
 <td>TD1</td>
 <td>1</td>
 </tr>
 <tr>
 <td>TD2</td>
 <td>2</td>
 </tr>
 </table>
 
 <table class="mytable">
 <tr>
 <td>TD1</td>
 <td>1</td>
 </tr>
 <tr>
 <td>TD2</td>
 <td>2</td>
 </tr>
 </table>
 
 <table class="mytable">
 <tr>
 <td>TD1</td>
 <td>1</td>
 </tr>
 <tr>
 <td>TD2</td>
 <td>2</td>
 </tr>
 </table>
 
</body>
</html>

上記のサンプルコードで、3つのうち最後(last-child)のテーブルの背景が青くなります。IE、Chrome、firefoxで確認しました。

ソースコードを見ないことには、質問者様のCSSがうまく表示されない原因は分かりません。

ただ、考えられる原因のひとつに、対応ブラウザが挙げられます。たとえば、IE8では「last-child」に対応していないようです。


2 ● a-kuma3
●100ポイント ベストアンサー

table.kurasu:last-childという風に指定できないようなのですが、

CSS のセレクタって、絞り込んでいくイメージがあるので、フィルターのように考えがちですが、.class や :last-child は AND の条件で結びつくと考えてください。
"table.kurasu:last-child" という指定は、「table タグに kurasu クラスが付いている中の最後の要素」ではなく、「タグが TABLE and クラスが kuras and その要素が兄弟の中で最後」というふうに解釈されます。

求めていると思われるものにちょっと近いのが、:last-of-type セレクタです。
ただ、クラス指定には効かないので、求めているものとは違うと思います。

<style>
/* 思った通りにいかない */
DIV.aaa:last-child {
 background-color: pink;
}
/* 後続する SPAN.bbb を無視して、色がつく */
DIV.bbb:last-of-type {
 background-color: yellow;
}
/* 最後の DIV に色が付くわけではない */
DIV:last-child {
 background-color: red;
}
/* タグの指定を * にすると DIV, SPAN の中の class="bbb" を選択する */
 *.bbb:last-child {
 background-color: blue;
}
</style>

<blockquote>
<div class="aaa">あああ</div>
<div class="aaa">あああ</div>
<div class="bbb">いいい</div>
<div class="aaa">あああ</div> <!-- 本当は、これに色を付けたい -->
<div class="bbb">いいい</div>
<div class="bbb">いいい</div> <!-- DIV.bbb:last-of-type がマッチする(黄色)-->
<span class="bbb">ううう</span> <!-- *.bbb:last-child がマッチする(青色)-->
</blockquote>

で、期待するスタイルの指定をするには、CSS だけでは無理で、javascript を使うしかないと思います。
例えば、jQuery を使うと、クラスのセレクタで絞り込んだ後に .last() メソッドを使います。

 $("DIV.aaa").last().css("background-color", "pink");

jsFiddle で、上記のコードを書いたものがこちらです。雰囲気が伝われば良いのですが。
https://jsfiddle.net/tdar0ase/


khaieさんのコメント
まさにこれを求めていました。 ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ