CODEWITHSUNDEEP
csstextnode
Thariama
Thariama

Reputation: 50832

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

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?

Upvotes: 2

Views: 1527

Answers (4)

crowicked
crowicked

Reputation: 579

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>

Upvotes: 1

oezi
oezi

Reputation: 51817

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*/
}

Upvotes: 3

kapa
kapa

Reputation: 78731

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.

Upvotes: 1

crowicked
crowicked

Reputation: 579

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>

Upvotes: -2

Related Questions