tableにクラス名kurasuを付けて、そのkurasuの付いた最後のtableに処理をしたいと思っています。
table.kurasu:last-childという風に指定できないようなのですが、正解をおしえてください。
No.2
4969
2152
100pt
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() メソッドを使います。
10
10
$("DIV.aaa").last().css("background-color", "pink");
jsFiddle で、上記のコードを書いたものがこちらです。雰囲気が伝われば良いのですが。
https://jsfiddle.net/tdar0ase/
No.1
6726
25pt
<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」に対応していないようです。
No.2
49692152
ここでベストアンサー
100pt
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/
まさにこれを求めていました。
ありがとうございます。
3
2
1
1
1
まさにこれを求めていました。
2015/07/27 22:49:01ありがとうございます。