- ベストアンサー
CSSについて教えて下さい
CSSについて教えて下さい。 ↓下記はどのような意味になりますでしょうか。 .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #550055; color: #eeeeee; }
- Qo Qoo（@ekekojr）
- お礼率56% (483/861)
- CSS
- 回答数2
- ありがとう数14
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
. : クラス > : 直下の要素 , : セレクタの併記 table-hoverクラス直下のtbody直下のtr上にマウスが来たときの直下のtdまたはth の背景色を#550055、文字色を#eeeeee
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
それは聞いているようではダメ。 パターンマッチ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching )ですが、 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) はCSSの命ともいえる重要な基礎です。セレクタやカスケーディングを知らないでカスケーディングスタイルシートは絶対に使えません。 ただ、 .table-hover > tbody > tr:hover > td .table-hover > tbody > tr:hover > th のいずれも、本来からいうとおかしいです。CSS2以降基点セレクを書かなければならないのに.table-hoverは？？？ *.table-hover とか、そもそも単純に tr:hover > td,tr:hover > th{} ですみそうですし、そもそも"table-hover"なんてclass名はつけないです。class名はあくまで文書構造の補完に使用しますから<table summary="今月の予定">HTML4.01、<table title="今月の予定">(HTML5)とかにしておいて、 tble[summry="今月の予定"] tr:hover > td, tble[summry="今月の予定"] tr:hover > th{} 、 tble[title="今月の予定"] tr:hover > td, tble[title="今月の予定"] tr:hover > th{} のほうが分かりやすいです。・・・HTMLもCSSもそのように書くべき tbodyを入れているのは、theadがあり、そこでは適用しないときでしょうね。thead要素がなければ子供セレクタは不必要でしょう。 それとも複雑な階層を持つテーブルなのでしょうか・
関連するQ&A
- cssの書き方について
下記の記述をhtmlにしました。 <table border="1"> <tr><th>あああ</th><th>いいいいい</th></tr> <tr><td>ううううう</td><td>おおお</td></tr> </table> <table border="1">のtdやthに有効にさせるcssを記述する際には どのように記述すればよいのでしょうか？ .1で良いのですかね？ よろしくお願いします
- ベストアンサー
- HTML
- CSSで<td>の背景色を変えたい。
下のようにTable aaa と bbbがあります。それぞれの<td>要素に マウスがHoverしたときに別々の色に変えたいのですが、これを CSS行うことは可能でしょうか？ <table class"aaa"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <table class"bbb"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <td>中には <a hrer="・・・が入っているのですが、 次のように行った場合、リンクアドレスが長くなるとうまく機能 しないようなのです。 table.aaa a:hover{ color: #FFFFFF; background-color: #FF0000; text-decoration: none; padding: 5px; } table.bbb a:hover{ color: #FFFFFF; background-color: #0000FF; text-decoration: none; padding: 5px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- フルCSSプロフェッショナルテンプレの表作成
ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 １、まったく別の表のためのCSSはどのように書けばいいのでしょうか？ ２、それをどのように記述すればよいでしょうか？ ３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？） ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>
- ベストアンサー
- ホームページ作成ソフト
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- CSSがわかりません！
<table> <tbody> <tr> <td>あ <td>い <td>う ・・・ って感じになってて、この「い」だけを300pxの幅にしたいです。 CSSに td.under_supplementation_table{ width: 300px important!; } と記述し、 <table> <tbody> <tr> <td>あ <td class="under_supplementation_table">い <td>う に直しても、うまくいきませんでした。 正しい修正方法を教えてください。
- ベストアンサー
- CSS
- CSS+HTMLでTBODYスクロールさせたい
「複数行の見出し行（THEAD）で複数行のデータ行（TBODY）をスクロールさせたい」 こんにちわ、HTML+CSSでご質問させていただきます。 ターゲットは、IE7、IE8、IE9です。 http://javascript123.seesaa.net/article/303954410.html を参考に、見出し行固定、のデータスクロールテーブルを cssを使って実現しようと思ってます。 上記URLのサンプルソースをそのままコピーして、 HTMLとして動かすと期待どおりの動きをいたします。 そのサンプルソースの見出し行を複数行にしたく、 以下のように修正いたしましたが、 見出し行２行のうちの１行分しか表示されません。 下記の様になります。 http://apooz.obata.tk/test.html 変更した箇所はtbodyの開始位置をヘッダーの高さ倍にしたかったので、 out_Div内のpadding-topを修正。 あとは、”調査時期”というカラムをTHEADとTBODYに増やしました。 <tr> <th class="coL0" colspan="5">調査時期</th> </tr> 試行錯誤いろいろしましたが、着眼点が悪かったのか、 スキル不足も手伝って、時間ばかり消化しております。 何かヒントなる情報いただけると幸いです。 宜しくお願い致します。 ------------------ソース ここから------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS でヘッダ固定、データ行を スクロールさせるテーブル。</title> <style type="text/css"> <!-- #sclTbl { /* スクロール対象のテーブル */ background-color: #fff; /* テーブルの背景色 borderの色になる */ border-collapse:separate; /* 枠線の表示の仕方 */ font-size: 16px;/* 文字のサイズ */ } #out_Div { /* 全体の枠。ここにヘッダを格納 */ position: relative; /* 相対位置 */ padding-top: 52px; /* #in_Div の開始位置 */ width: 480px; /* 列幅の合計＋セル間の幅(2px)の合計＋20px 程度 */ border: 1px solid #0099cc; /* 外枠 */ background-color: #fff; /* 白 */ } #in_Div {/* tbodyが入っている。ここがスクロール対象*/ overflow: auto; /* スクロールバー*/ height: 133px; /* tbodyを表示する高さ */ } #sclTbl thead tr {/* ヘッダ 見出し行,位置を #out_Div の左上端に移動 */ position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ left: 0px; /* 左からの位置 */ background-color: #fff; } #sclTbl thead tr th{/* thead 'th'のスタイル */ background-color: #0099cc; /* 背景色 */ color: #fff; /* 文字色 */ padding: 3px 0px; } #sclTbl tbody tr td{/* tbody 'td'のスタイル */ background-color: #dcdcdd; color: blue; padding: 3px 6px; } .coL0 { width: 30px; }/* colgroupの列幅指定 */ .coL1 { width: 100px; } .coL2 { width: 120px; } --> </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl"> <!--colgroup tableの列をグループ化し、列幅指定--> <colgroup class="coL0"></colgroup> <colgroup class="coL1"></colgroup> <colgroup class="coL2"></colgroup> <colgroup class="coL1" span="2"></colgroup> <colgroup class="coL3"></colgroup> <thead> <tr> <th class="coL0" colspan="5">調査時期</th> </tr> <tr> <th class="coL0">Ｎo</th> <th class="coL1">都道府県</th> <th class="coL2">県庁所在地</th> <th class="coL1">人口</th> <th class="coL1">面積（ｋm2)</th> </tr> </thead> <tbody> <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>1</td> <td>北海道</td> <td>札幌市</td> <td>5,517,449</td> <td>78,420.61</td> </tr> ： （中略） ： <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>前橋市</td> <td>2,006,903</td> <td>6,363.16</td> </tr> </tbody> </table> </div> </div> </body> </html> ------------------ソースここまで------------------ 大変困ってます。助けてください。m(_ _)m
- 締切済み
- HTML
- 文字色を変更するCSSが効かない
テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが 文字色を変更するcolorが効かなくて困っています。 背景色は変更されるのでbackgroudは効いています。 原因はお分かりになりますでしょうか。 【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- ＴＤタグをスタイルシートを使って綺麗に簡単に書きたい。
二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr> <th> </th> <th>XXXXXX</th> <th>XXXXXX</th> <th>XXXXXX</th> </tr> <tr> <th>XXXXXX</th> <td align="right"><a href="###.html">100</a></td> <td align="right"><a href="###.html">525</a></td> <td align="right"><a href="###.html">300</a></td> </tr> <tr> <th>XXXXXX</th> <td align="right"><a href="###.html">10</a></td> <td align="right"><a href="###.html">150</a></td> <td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問１ <td>は全て数値で、必ず右寄せ（align="right"）なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか？ 質問２ マウスカーソルをリンクに合わせると文字が反転するようになっているのですが できる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか？ できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。
- ベストアンサー
- HTML
- CSSにてtr内でtdを縦並びにする
<table> <tr> <th>th</th> <td>td</td> </tr> </table> thとtdが横に並ぶと思うのですが、 どうにかCSSで縦に並べることってできませんでしょうか？？ 変な質問かと思いますがどなたかどうぞよろしくお願い致します。
- ベストアンサー
- CSS
お礼
ありがとうございます！