テキストノード用のCSSセレクターはありますか?


173

私がやりたいこと(明らかにIEではない)は:

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

これはテキストノードにマージンを与えます。(それは可能ですか?)CSSでテキストノードを取得するにはどうすればよいですか?


2
::first-line名前からわかるように、を使用して概算できますが、これはテキストの最初の行にのみ適用されます。(また、いくつかのプロパティしか設定できないと思います)
Mark Garcia

回答:


114

テキストノードにマージンやその他のスタイルを適用することはできないため、スタイルを適用する必要があるものはすべて要素内になければなりません。要素内のテキストの一部に異なるスタイルを設定するspan場合divは、たとえば、またはで囲みます。


58
それにもかかわらず、テキストノードで:: beforeと:: afterが必死に欠けています。
shabunc 2013

6
I'm nevertheless desperately missing ::before and ::after on text nodes.確かに。彼らはフォーマットをとらないかもしれませんが、確かにかかりcontentます。
Synetech 2015

12
テキストノードをターゲットにする方法を尋ねるのは完全に合理的な質問です。OPは特に「マージン」と言っていますが、それらはテキストノードに適用できる他のスタイルであり、親ノードではなくテキストノードに適用したい場合があります。たとえば、テキストの下にボーダーの下部が必要だとします。その境界の下をテキストノードに適用すると望ましい結果が得られますが、それを親divと言うために適用すると、div全体の周りに下の境界が作成されます。もちろん残念ながら、CSSではHTML要素を追加してテキストノードをターゲットにすることはできません...少なくとも現時点では。
VKK、2016年

1
フォントを設定できますが、確かに機能しますが、その他のスタイルは適用されません
Hamid Bahmanabady


50

CSSでテキストノードをターゲティングすることはできません。同感です; 私はあなたができることを望みます...しかしあなたはできません:(

あなたがテキストノードをラップしていない場合は<span> @Jacobが示唆のように、あなたの代わりに、周囲の要素を与えることができるpaddingとは反対にmargin

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.