How can i style textnodes that are direct children of a body-element?

Question

I have a body elemnt containing textnodes as a direct children, but patragraphs too. Now, i would like to create my css so that this textnodes get specific css settings. On the other hand i do not want to style textnodes that are deeper down the hierachie (i.e. children of one of the paragraphs).

How can i style this textnodes that are direct children of a body-element without styling textnodes that are not direct children?

score 3 · Answer 1 · answered Jan 21 '11 at 10:18

3

as far as is know (nd if i havn't missunderstood your question), you can't - you'll have to override styles for your paragraphs or other child elements. i would do it like this:

/* for direct text-nodes */
body{
  color: red; 
}

/* maybe its possible to use "body *" here,
   wich sounds like what you need, but i've
   never tested this
*/
body p{ 
  color: black; /* "default" value here*/
}

answered Jan 21 '11 at 10:18

oezi

51,017
10
98
115

unfortunatly this is not acceptable in my case, because color would need to be set in every other class that is being applied to elements further down, but thnaks for your answer (+1) – Thariama Jan 21 '11 at 10:29

score 1 · Accepted Answer · answered Jan 21 '11 at 10:14

1

AFAIK there is no way to targer text nodes directly.

You can set your text node styles for BODY and then apply different styles for your Ps.

Alternatively you can put your textnodes in SPANs and you can style them.

answered Jan 21 '11 at 10:14

kapa

77,694
21
158
175

+1 that is what i feared, then there is no acceptable way to be found :( – Thariama Jan 21 '11 at 10:30

score 1 · Answer 3 · answered Jan 21 '11 at 10:59

Well, how about defining it this way: body * { /* some general plain style, for all document elements */ }

AND

body { /* your text-node style here */ }

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">

body {color:red}

body * {
color:blue;
}
</style>
</head>

<body>
sdfsdfsd
<ul>sdfs
  <li>Coffee <i>- black hot drink</i></li>
  <li>Coca Cola <i>- black cold drink</i></li>
</ul>
jdtzje<div>some div content</div>
<ul>
  <li>Coffee <i>- black hot drink</i></li>
  <li>Coca Cola <i>- black cold drink</i></li>
</ul>fdsfs
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>

not if i do not want to have to add color to each class assigned to an elemnt deeper down the body-tree — Thariama, Jan 21 '11 at 11:37

crowicked · Answer 4 · 2011-01-21T10:10:35.467

-2

check this tutorial: http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child5

EDIT: here's an example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
li>i:first-child
{
color:red;
} 
</style>
</head>

<body>
<ul>
  <li>Coffee <i>- black hot drink</i></li>
  <li>Coca Cola <i>- black cold drink</i></li>
  <li>Test <p>- some text here that's not affected!</p></li>
</ul>
<ul>
  <li>Coffee <i>- black hot drink</i></li>
  <li>Coca Cola <i>- black cold drink</i></li>
</ul>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>

edited Jan 21 '11 at 10:10

answered Jan 21 '11 at 10:05

crowicked

579
4
6

i am asking for the styling of textnodes being direct children of a body element! – Thariama Jan 21 '11 at 10:27
Sorry 'bout that then, misunderstood. Answer: you can't. Not without enclosing that text in some HTML tags, at least. CSS is inherited hierarchically downwards and, to my knowledge, there's no way to disable that but to override it by defining CSS for the children elements. EDIT: So there is a way! oezi's suggestion with "body *" works, just tested it out. Thnx to both of you, I learned something new. – crowicked Jan 21 '11 at 10:49

How can i style textnodes that are direct children of a body-element?

4 Answers4