How to style a dynamic html created by PHP - php

Question

My php page will generate a dynamic html.
The following is the output;
<label class="required">suject *</label>
Unfortunately i can't edit the html
Now I need to show '*' in red color.
How I can write the css for that?

Answer 1

There are several ways to do this:
If you have access to the PHP source code, then you can modify the output accordingly, perhaps wrap the * with <span> tags and style the accordingly.
Alternative, you can use JS to do the same:
$(document).ready(function() {
// Loop through all labels with required class
$('label.required').each(function() {
$(this).html($(this).html().replace(/\*/g, '<span class="asterisk">*</span>'));
});
});
And in your CSS, you can style it in any way you want:
.required .asterisk {
color: red;
}
See fiddle here - http://jsfiddle.net/teddyrised/JTesR/
Even better: Using CSS
This is written in light of trying to be as semantically correct as possible - you can remove the * character with JS (or changing the PHP code), but use a pseudo-class to add it back to the label element:
label.required:after {
content: '*';
color: red;
}

Answer 2

CSS allows you to select elements (and a limited number of pseudo-elements such as :first-line).
There is no way to select "last character", "characters matching *" or anything else that would make what you want achievable.
You have to modify the DOM. The easiest way to do that would be to modify the HTML it is generated from. The hacky approach would be to modify it with JavaScript after it has loaded.

Answer 3

This is based on Terry's answer: You can simply use :after to simulate effect, and place that content over generated HTML.
label.required:after {
content: '*';
color: red;
background:white;
position: relative;
left: -8px;
}
http://jsfiddle.net/x2KN7/

Answer 4

Its not possible through CSS, but you can do something with the javascript. If this content is generated on page load then you can hook page load event, get reference to this element and make changes.
<script type='text/javascript'>
document.onload = function (e) {
var col = document.getElementsByClassName("required");
for (var i=0;i<col.length;i++) {
if (col[i].innerHTML == "subject *") {
col[i].innerHTML = "subject <span style='color:red'>*</span>";
}
}
}
</script>
Try the above, hopefully it will solve your problem. I have used simple javascript, but if you know a javascript library (YUI, dojo, jquery) then you can do this in 1 or 2 line.