例えばこのような表がある場合
バナナの表記だけ色を変えたい場合
cssはどのようにて書けばいいですか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
回答2件
0
html
1<style> 2td { 3 border: solid 1px red; 4} 5.banana { 6 color: blue; 7} 8#apple { 9 color: orange; 10} 11</style> 12 13<table> 14 <td id="apple">りんご</td> 15 <td class="banana">バナナ1</td> 16 <td class="banana">バナナ2</td> 17</table>
対象が1つだけのときidを使い、対象が複数のときclassを使います。
CSSスタイルシートの<style>はidのとき頭に#を記述し、classのとき頭に.を記述します。
HTMLタグに<td style="color: blue;">と記述することもできます。
投稿2019/09/07 00:34
総合スコア777
2019/09/07 02:29 編集
> cssはどのようにて書けばいいですか?
とあるのでtdにclass,idを付与するなどHTMLをいじるのは何か違う気がします。
気がするだけで低評価を付けないでいただけますか?
何が違うのでしょう?
はっきり言ってください。
2019/09/07 01:52
もう1つの質問の方で、「HTMLに手を入れる」前提のコメントが付いています。
https://teratail.com/questions/210554#reply-310471
(やっぱり重複質問はややこしいですね…)
asuchi0819は「何か違う気がします」と書いていたのを編集して消しましたね?
私のコメントがつながらなくなるので消さないで欲しかったです。
「何か違う気がします」と「違うと私は思います」は変わっていないと思います。
「私は違うと思った」という理由で低評価を付けていいなら誰にでもいくらでも低評価を付けられるからです。
私が知りたいのは低評価を付けた合理的な理由です。
それを知って反省して次に活かしたいですから。
今のままですと何もわかりませんし何も活かせません。
宜しくお願いします。
2019/09/07 02:36 編集
まず、質問ごとに前提はリセットされるべきものです。(特記がなければ)
querykumaさんの回答は「実現可能」な回答ではありますが「質問に沿った回答」ではありません。
これが私が低評価をつけた理由です。
質問内容に沿ってない回答の中でも「不可能なので◯◯のほうがいい」「こちらの方が効率的」と言うものは明記した上でしたら全然良いと思います。
最初の私のコメントの言葉不足すみませんでした。
ご納得いただけませんでしたら返信の方よろしくお願いします。
「cssはどのように書けばいいですか」はHTMLを使わないでCSSだけで書くという意味になりますか?
ならないと思います。
そのように質問したいなら「HTMLを使わないでcssはどのように書けばいいですか」と質問するはずです。
CSSとHTMLは兄弟のようなもので分ける理由がわかりません。
初心者マークを付けている方がCSSとHTMLを分けてどうしたいのでしょうか?
CSSとHTMLを分ける意味が分かりません。
CSSとHTMLを分ける例を思いつきませんのでHTMLを使わないという制限のある例を上げていただけると幸いです。
質問に初心者マークが付いているのでCSSとHTMLの区別がはっきり付いていないかもしれません。
聞かないと分かりませんが。
HTMLを使わないでCSSだけで書きたいと質問してきたらCSSとHTMLは兄弟のようなもので分ける理由が分からないと返信したと思います。
あなたの回答のtd :nth-child(2) は<td>を追加したとき対応できません。
追加した<td>の色を変えたいかもしれませんし、色を変えたくないかもしれないからです。
idやclassなら<td>を追加したときも対応できると思い、回答者のためを思って回答しました。
それなのに低評価を付けられるのは意味が分かりません。
2019/09/07 03:23
trが抜けていますよ。
【<table>: 表要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
2019/09/07 03:45 編集
hatena19さんからのご指摘により削除
低評価 が0に戻りましたのでこちらの件は終わりにしたいと思います。
コメントの文章を書くのに疲れました。
編集前のコメントを読んでいました。
また編集して削除したのですか?
こちらは「綸言汗の如し」や「一度口に出した言葉は決して元には戻せない」のつもりで書いていますから文章を書くのにとても疲れるのです。
また低評価を押されたとしてもあなたの相手はもうしません。
2019/09/08 15:07
(再掲)trが抜けていますよ。
0
CSSだけでは要素内の文字列等を取得することができないのでtdの2番目の要素だけCSSを適用する方法をお答えします。
要素の個数が動的に変化する場合等はQuerykumaさんの方法の方が良いかもしれません。
CSS
1td :nth-child(2) { 2 3}
投稿2019/09/06 23:25
編集2019/09/07 03:49総合スコア10434
2019/09/07 03:44
「兄弟要素の2番目の要素に色を付けたい」という質問なら、ばっちりの回答ですが、
「バナナの表記だけ色を変えたい」という質問への回答としては「質問に沿った回答」といえるかどうか。低評価を付けるほどではないですが。
「CSSだけで」バナナの表記だけ色を変えることは不可能と断ったうえでの回答ならいいですが。
その場合は、:nth-child を使うか id class 付加を使うか、どちらが「質問に沿った回答」かは、質問内容だけからは判断不能ですね。
よく考えるとそうですねありがとうございます。
2019/09/07 03:50
初心者の質問への回答は逆に難しいですよね。
前提条件や最終目的の説明が不足しているので、それを推測して回答する必要があります。
こういう前提条件、最終目的ならと断って回答すればいいのですが、面倒なのではしょって推測で回答して、前提条件が違ったということはよくあります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
