How to point to CSS default class using the class attribute

Question

Is there a way to point to the default CSS class of an object?

For example, depending if a user is logged in I want to specify a different CSS class to control the style of a header.

$css_class = "";
if($logged_in)
    $css_class = "success"

echo "[h1 class=".$css_class."] My Title [/h1]"

If the user is logged in, the css class is set to "success"" otherwise, it's set to "".

I know it's improper w3c to have a blank class, but is there a way that I can just point to the default H1 property instead of creating a separate "not logged in" css class?

Answer 1

<h1 class="">My Title</h1> will work fine (not sure if it'll pass W3C validation, but it'll work in all major browsers).

Answer 2

Why not just omit the class attribute if it's empty?

$css_class = "";
if($logged_in)
    $css_class = " class=""success"""

echo "[h1.$css_class.] My Title [/h1]"

(Not sure about the escaping of quotation marks in a string... I have no idea what language you are using...)

Answer 3

$css = $logged_in ? 'success' : 'dummy-undefined-css-value';
echo "<h1 class=\"$css\">My Title</h1>";

Answer 4

It's not invalid to to have an empty string for a className. The class attribute is a cdata-list, so pretty much anything can go in there and it will still validate.

However, you will need to use quotes around your attribute values, otherwise you can't make an empty attribute parse. It's the right thing to do to always include the quotes anyway.

echo '<h1 class="'.htmlspecialchars($css_class).'"> My Title </h1>'

Answer 5

An empty class attribute is only invalid under XHTML 1.1. Using a DOCTYPE of XHTML 1.0, HTML 4.01 and HTML 5 is will validate fine.

I wouldn't get too hung up on validation, it's very useful but isn't the be-all and end-all of web development. The only instance where I absolutely make sure my HTML 100% validates is during the very initial HTML and CSS build, since at that stage invalid markup can cause havock with CSS. Once I start adding server-side and Javascript interactions I'm not overly concerned with it.

Of course, you shouldn't just blatently ignore it, but as long as you know what the validation errors are, understand them, and have made a concsious decision not to fix them, I think that's okay.

Answer 6

If you're going to have a conditional like in Matt Huggins' answer anyway, and considering your comment on Guffa's answer, why don't you move the conditional into the echo? That'll give you the cleanest HTML output. For example:

$css_class = array();
if($logged_in)
{
    $css_class[] = "success";
}

if($something_else)
{
    $css_class[] = "some-class";
}

echo '<h1' .
     empty($css_class)
         ? ''
         : ' class="' . implode(' ', $css_class) . '"'
     . '> My Title </h1>';