質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

cssをピンポイントで指定する方法

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,120

score 14

例えばこのような表がある場合
バナナの表記だけ色を変えたい場合
cssはどのようにて書けばいいですか?

<td>りんご</td>
<td>バナナ</td> 

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/09/07 09:03

    質問が重複しています。不用なタグは外してください。

    キャンセル

  • querykuma

    2019/09/07 09:35

    タグはHTMLとCSSだけでいいと思います。

    キャンセル

  • yoshinavi

    2019/09/07 12:49

    質問が重複している他方では、解決済みになっています。

    自己回答なり、何なりで、質問を終了してください。

    個別の回答者が混乱する原因を作っています。

    キャンセル

回答 2

0

CSSだけでは要素内の文字列等を取得することができないのでtdの2番目の要素だけCSSを適用する方法をお答えします。
要素の個数が動的に変化する場合等はQuerykumaさんの方法の方が良いかもしれません。

td :nth-child(2) {

}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/07 12:44

    「兄弟要素の2番目の要素に色を付けたい」という質問なら、ばっちりの回答ですが、
    「バナナの表記だけ色を変えたい」という質問への回答としては「質問に沿った回答」といえるかどうか。低評価を付けるほどではないですが。
    「CSSだけで」バナナの表記だけ色を変えることは不可能と断ったうえでの回答ならいいですが。
    その場合は、:nth-child を使うか id class 付加を使うか、どちらが「質問に沿った回答」かは、質問内容だけからは判断不能ですね。

    キャンセル

  • 2019/09/07 12:44

    よく考えるとそうですねありがとうございます。

    キャンセル

  • 2019/09/07 12:50

    初心者の質問への回答は逆に難しいですよね。
    前提条件や最終目的の説明が不足しているので、それを推測して回答する必要があります。
    こういう前提条件、最終目的ならと断って回答すればいいのですが、面倒なのではしょって推測で回答して、前提条件が違ったということはよくあります。

    キャンセル

0

<style>
td {
 border: solid 1px red;
}
.banana {
 color: blue;
}
#apple {
 color: orange;
}
</style>

<table>
 <td id="apple">りんご</td>
 <td class="banana">バナナ1</td> 
 <td class="banana">バナナ2</td> 
</table>


対象が1つだけのときidを使い、対象が複数のときclassを使います。
CSSスタイルシートの<style>idのとき頭に#を記述し、classのとき頭に.を記述します。
HTMLタグに<td style="color: blue;">と記述することもできます。

例のHTMLは次のように表示されます。
CSS表示画像

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/07 12:51

    低評価 が0に戻りましたのでこちらの件は終わりにしたいと思います。
    コメントの文章を書くのに疲れました。

    キャンセル

  • 2019/09/07 12:57

    編集前のコメントを読んでいました。
    また編集して削除したのですか?
    こちらは「綸言汗の如し」や「一度口に出した言葉は決して元には戻せない」のつもりで書いていますから文章を書くのにとても疲れるのです。
    また低評価を押されたとしてもあなたの相手はもうしません。

    キャンセル

  • 2019/09/09 00:07

    (再掲)trが抜けていますよ。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る