CSSセレクタ?の質問です。

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/07/27 02:49:22
  • 終了:2015/07/27 22:49:38

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242015/07/27 18:37:48

ポイント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/

id:khaie

まさにこれを求めていました。
ありがとうございます。

2015/07/27 22:49:01

その他の回答(1件)

id:dev2 No.1

LLマン回答回数67ベストアンサー獲得回数262015/07/27 06:27:42

ポイント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」に対応していないようです。

id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242015/07/27 18:37:48ここでベストアンサー

ポイント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/

id:khaie

まさにこれを求めていました。
ありがとうございます。

2015/07/27 22:49:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません