ansaurus

Question

Apply style to plain text inside DIV without affecting DIV's other children

Answer 1

A:

if you can target only for browsers that support CSS3 (enough to support the newer selectors) then you can use the :not negation selector to exclude all children.

something like this should work:

div.post *:not(div)  
div.post *:not(table)

the :not selector is not well documented, its more trial and error from people trying it out. see here: http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/

But otherwise I think the best option is to have the CSS setup in such a way that the styling for each child element and their children needs to be explicitly defined. This will ensure that the styling you apply to the parent div will only affect the text content outside the children.

eg.

div.post { font-family:tahoma }
div.post div { font-famile:arial }
div.post table { font-family:verdana }

Moin Zaman 2010-08-29 08:03:55

I can’t see how the negation selector helps here, to be honest.

Timwi 2010-08-29 08:08:57

Answer 2

A:

I would use two addition indexes, startOfValidArea and endOf...
the area is where is your text, and the indexes are, where you should put your <p...> and </p> tags or whatever tags

then you are moving these tags like:
startof.. set to ending of the root <div> and find the first occassion of < after it, this is the first area
and then while you arent on the end, get the tag after this mentioned < (like substring between < and ' ' or >) and construct temporary ending tag of this (like </xxx>), of course, be aware of multiple identical tags inside (like <table><table></table></table>)
search for this temp ending tag and it will be the next startOf... index, again search for the next < and this is the second area and so on..
hope it is clear and understandable..
P.S. be aware of tags like <br /> and check every start of < for this situation
its just an algorithm, i dont code in php, but it should be similar

Edit: the code, but Im not sure if its working, I dont have localserver to test, hope it will be helpfull

$textStart = stripos($postMessage, '>')+1;            // startig index for the text to highlight
$textEnd = stripos($postMessage, '<', $textStartPos);     // ending index for the text to highlight

while($textStart != false && $textEnd != false){
    // while there is still any text to highlight

    // insert the highlighting code
    $postMessage = substr ($postMessage, 0, $textStart) . '<p class=\"postMessage\">' . substr ($postMessage, $textStart, $textEnd) . '</p>' . substr ($postMessage, $textEnd, strlen($postMessage);

    // get the tag
    $endOfTag = (stripos($postMessage, ' ', $textEnd) < stripos($postMessage, '>', $textEnd)) ? stripos($postMessage, ' ', $textEnd) : stripos($postMessage, '>', $textEnd);
    $tag = substr ($postMessage, $textEnd, $endOfTag); // getting the tag here

    if($tag == '<br' || $tag == '<img'){
        // do smthing with not-paired tag, like check if the tag is ending with the '/>' string and then ignore it and get the next tag
    }

    $closingTag = '</'.substr($tag,1,strlen($tag));           // creating the closing tag like </div or </p    
    $nextSameTag = stripos($postMessage, $tag, $endTag);
    $nextClosingTag = stripos($postMessage, $closingTag, $nextSameTag);

    // loop through the same inner tags like <div>text<div>text</div>text</div>
    while($nextSameTag < $nextClosingTag && $textStart != false && $textEnd != false){  
        $nextSameTag = stripos($postMessage, $tag, $nextClosingTag);
        $nextClosingTag = stripos($postMessage, $closingTag, $nextSameTag);
    }
    $textStart = stripos($postMessage, '>', $nextClosingTag)+1;
    $textEnd = stripos($postMessage, '<', $nextClosingTag);
}

Zavael 2010-08-31 12:04:57

Answer 3

A:

body {color:blue}    
div.post {color:red}
div.post * {color:blue}

works at least in safari. Why are you doing it in PHP?

danielsherson 2010-09-01 01:43:22

PHP because the whole site is in PHP, including the code to grab posts out of the MySQL database backend of a vBulletin message board. So I was trying to add a CSS class to that unstyled text using PHP. If I don't have to add a class but can use the selectors you show, so much the better. I will give it a try.

AndrewRich 2010-09-01 06:20:24

ansaurus

tags:

views:

answers:

Apply style to plain text inside DIV without affecting DIV's other children

related questions