レスポンシブデザインでtdタグをdisplay:list-itemにして最初の「・」だけ表示したい

レスポンシブデザインで
tdタグをスマホ（max-width:480px）で見た時は
list-itemにし
さらに「・」を非表示にしています。

スマホ（max-width:480px）で見た時に
最初の「・」だけ表示し
あとは非表示にしたいのですが、できますか。
できるのであれば、やり方を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <meta name="viewport" content="width=device-width, initial=1.0">
7  <link rel="stylesheet" href="mystyle.css">
8</head>
9<body>
10  <table class="demo03">
11  <tr>
12  <td>Google Chrome</td>
13  <td>Safari</td>
14  <td>Mozilla Firefox</td>
15  <td>Internet Explorer</td>
16  </tr>
17  <tr>
18  <td>Illustrator</td>
19  <td>Photoshop</td>
20  <td>Lightroom</td>
21  <td>Dreamweaver</td>
22  </tr>
23  </table>
24</body>
25</html>

CSS
1@media only screen and (max-width:480px) {
2td {
3  display: list-item;
4  list-style:none; 
5}

修正後

CSS
1@media only screen and (max-width:480px) {
2  td {
3    display:list-item;
4    list-style:none;
5  }
6
7  td:first-child {
8    list-style:inherit;
9  }
10}

kszk311

2018/03/03 13:29 編集

HTMLのソースも記載してください。あと、コードはcodeブロックで囲んでもらえますか https://teratail.com/help#about-markdown

idkohhi

2018/03/04 01:34

早速ご指摘いただきありがとうございます。質問を編集し、ソースを記載しました。

行動規範の内容に同意します

回答2件

ベストアンサー

疑似要素「before」をidやclassで当てればどうでしょうか？

参考：
CSSの疑似要素とは？beforeとafterの使い方まとめ

投稿2018/03/04 07:07

yoshinavi

総合スコア3523

idkohhi

2018/03/04 09:33 編集

ありがとうございました。できました。内容は下記です。 @media only screen and (max-width:480px) { td { display:list-item; list-style:none; } td:first-child::before { content:'・'; } }

yoshinavi

2018/03/04 09:36

解決されて何よりです。(^^)

行動規範の内容に同意します

疑似セレクタのfirst-chidで指定すれば、理想の表示になるかと思います。

css
1	@media only screen and (max-width:480px) {
2		td {
3			display: list-item;
4			list-style:none;
5		}
6		td:first-child {
7			list-style: inherit;
8		}
9	}

投稿2018/03/04 02:06

kszk311

総合スコア3404

idkohhi

2018/03/04 03:13

早速回答いただきありがとうございます。すいません。うまくいかないです。サーバにアップして自分のスマホでみても修正前のままです。 CSSのソースは質問に「修正後」の文字を追加してその下の書いてあります。 HTMLは一切変更しておりません。お手数おかけしてすいません。

kszk311

2018/03/04 04:24

margin-left: 2em;とかで、少し右にずらしたら、「・」が出てこないですかね…。

idkohhi

2018/03/04 09:40

ありがとうございました。この方法でもできました。内容は下記です @media only screen and (max-width:480px) { td { display:list-item; list-style:none; } td:first-child { list-style:inherit; margin-left: 2em; } }

行動規範の内容に同意します

あなたの回答