jQueryによるclassの付加 子要素すべてのみに適応、子要素には適応させない。

Question

お世話になっております。
今回は、jQueryの問題です。
https://codepen.io/okbokuzyou/pen/yjQRvx
codepenにて記述しました。

この中でaのみcolor:whiteを適応するにはjavascript,jQueryをどの用に記述すればよろしいでしょうか。
よろしくお願いします。

HTML

<div class="member_div">
  <div>a
    <div>ab</div>
    <div>ac</div>
  </div>
</div>

CSS

.member_div{
  width:50px;
  height:90px;
  background-color:blue;
}
.member{
  color:white;
}

jQuery

$(function(){
					var a=$(".member_div").children("div");
					$(a).addClass("member");
				});

Comments

[yambejp]

ここでいう「a」とはa単体のことで、「ab」や「ac」のaには適用しなくてよいですね？

[kuroishi]

すみません、説明不足でした。その通りでa単体のaのみに適用ってことです。

[m.ts10806]

外部サービスにコードを載せられた場合は、質問本文に追記してください。何かでその外部サービスが利用できなくなった場合、コードが参照できなくなるためです。

Answer 1

残念ながら、colorは継承されてしまうので（MDN）、「ある要素の直下のテキストだけに適用させる」ことは、素直にはできません。

• 適用させるべき部分を適切なタグに囲んで、そこだけCSSをかける（なお、jQueryではテキストノードを扱えませんので、生のDOMが必要になります）
• 外側のcolorがはっきりしている状態であれば、内側の要素でcolorを同じものに戻す

.member_div > div{
  color: white;
}
.member_div > div > *{
  color: black; /* 元の色に合わせて */
}

Comments

[kuroishi]

やはり、そうなってしまいますよね。ありがとうございます！解決しました

Answer 2

.member_div > div:first-letter {
  color: white;
}

https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter