60608


下記のやりたいことをjavascriptを使わずにcssだけで実現したい場合、  
cssのセレクタはどのように指定すればよいのか教えていただきたいです。

## やりたいこと

次のようなdivタグがあったとします。

[code]

    <div class="hoge">りんご</div>
    <div class="hoge">ばなな</div>
    
[/code]

このときに、２個目のdivタグ(=「ばなな」が文字列に入っているdivタグ)のみfontサイズを12pxにしたい

[code]

    .hoge {
      font-size: 12px;
    }
    
[/code]

.hogeだけだと両方にきいちゃいますが、文字列の部分一致、完全一致などで二番目のdivタグだけにきかせたいです。

よろしくおねがいします。


CC BY-SA 4.0
2019-11-17T10:41:47.390
60606
2019-11-17T11:55:08.907
32428
question
javascript html css
cssのセレクタで、divタグ内部の文字列が指定した文字列と一致するときだけ指定する方法を知りたい


cssだけで中身による選択はできないはずです．例えば，以下のような要素に対してマッチすべきかみたいなことを考えると，対応できないというのが何となくわかるのではないでしょうか．

[code]

    <div class="hoge"><p>ばなな</p><img src="huga.png"/></div>
    <div class="hoge"><p>banana</p><img src="ばなな.png"/></div>
    
[/code]

そのようなセレクタでいうと，属性セレクタ（参考：<https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors>）が一番近そうな気がします．HTML5では，カスタムデータ属性を自由に付けられるので，冗長ですが`data-
content`（名前は適当です）に同じ中身のテキストを与えて，属性セレクタでマッチさせることが可能です．

[code]

    <div class="hoge" data-content="りんご">りんご</div>
    <div class="hoge" data-content="ばなな">ばなな</div>
    
[/code]

[code]

    .hoge[data-content="ばなな"] {
      font-size: 12px;
    }
    
[/code]

## 参考

  * 本家stack overflowでの同様の質問 <https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text>


CC BY-SA 4.0
2019-11-17T11:55:08.907
60608
2019-11-17T11:55:08.907
36544
60606
answer