Question

I have dynamically generated code like the following:

<div class="message-error error">The Message field is required.</div>
<div class="email-error error">The Email field is required.</div>

Is there anyway that I could write my css with out having to state every field name before the -error error?

Answer 1

When class names are separated by spaces, it means that styles from both classes will be applied to that element.

If you were to have the following CSS:

.error {
    font-weight: bold;
}

.message-error {
    color: blue;
}

.email-error {
    color: green;
}

Then both elements would be bold, but the colors would each be applied to only one element from your sample.