[Solved] How do you style the text wit in a tag independently of the tag itself

[Philip1415]

Hi everybody.

I have the following html code

<div>
  <?php # Display any error messages if present. if ( isset( $errors ) && !empty( $errors ) ) { echo '<p>
    var msG = ; '; echo 'Error:' ; foreach ( $errors as $msg ) { echo " - $msg " ; } echo ' You have 3 more attempts
  </p>' ;} ?>
</div>

(Please ignore (var msG = ; ) – it’s an experiment)

and the corresponding css

#errorbox {
width:1000px;
height:40px;
position:fixed;
border: 1px solid #000;
left:300px;
top:150px;
text-align:center;
opacity:0.4;
background-color:red; }

err_msg {

color:#FFFFFF;
opacity:0;
}

I want to style error_msg independently of errorbox but I can’t figure out how to address it correctly in the css. Can this be done and if so how?

Many thanks in advance

Philip

[Paulie_D]

You can’t select a Text Node with CSS so you can’t style it.

You would need some kind of element wrapper. What HTML does PHP output?

I can’t see an ID of #errobox being used in the PHP you provide although it looks like you are outputing the error text inside a p tag.

IF the div you are putting the text in has an ID of #errobox AND the message is wrapped in p tag then

#errorbox p {
your styles here
}

In not then…as I said, we need to see what the actual HTML is…including any IDs or classes.

[Philip1415]

Thanks Paulie_D ,

This is what I thought I posted (But didn’t)!

<div>
  <?php # Display any error messages if present. if ( isset( $errors ) && !empty( $errors ) ) { echo '<p>
    var msG = ; '; echo 'Error:' ; foreach ( $errors as $msg ) { echo " - $msg " ; } echo ' You have 3 more attempts
  </p>' ;} ?>
</div>

Philip

[Paulie_D]

No…not the PHP…the HTML that is output by the PHP.

If all that is being output is

<div>
<p> Some Error Message </p>
</div>

Then there is no specific way to address it.

The div or p will need an ID or a class applied so we can target it specifically.

If we tried

div p {
some styles
}

It would grab every p on the page…which, I am assuming is not what you want.

[Philip1415]

It’s ok, the

<

div> has the id of errorbox and #errorbox p does exactly what I want to that

<

p> only.

Thank you very much.

Philip

[chrisburton]

Is this solved?

[Author]

Posts