Question

I have this link created in PHP:

echo '<p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="'.$suggested_solution_id.'"  data-problem_id="'.$problem_id.'">'.$solution_name.'</a></p>';

And I have this css for it:

a.expand_suggested_solution
{
    color: blue;
}

But I also tried a bunch of different things like

.expand_suggested_solution

{
    color: blue;
}

.expand_suggested_solution .a
{
    color: blue;
}

But none of those worked 🙂 Any idea of what I am doing wrong? Its probably simple, but I just suck at css sometimes 🙂

Here it isn’t working for some reason: http://www.problemio.com/problems/problem.php?problem_id=223 in the “Existing Group Plans” link

Answer 1

The rule:

.ui-widget-content a {
    color: #222222;
}

In the jQuery theme (http://hotlink.jquery.com/jqueryui/themes/base/jquery.ui.theme.css) is more specific, and hence the link will be #222222.

You can make your rule more specific by doing something like:

.problem_comment_text a.expand_suggested_solution { color: blue; }

For an explanation of CSS specificity, see here.