Question

I’m trying to write a style but am having trouble identifying a class of element identified by an ID such as airbus.errors (first example) or boeing.errors (second example below).

<div class="message">
  <span id="airbus.errors">
</div>

I’ve tried this but it doesn’t work:

.message .errors
{
  background: red;
}

I need to write it generically so that it would also work with this case:

<div class="message">
  <span id="boeing.errors">
</div>

Answer 1

When you write .message .errors it’s looking for an element with a class message and descendants with a class errors which doesn’t match your HTML

Try this instead:

.message #boeing-errors
{
    background: red;
}

or just

#boeing-errors
{
    background: red;
}

since #boing-errors is an ID and should be unique.

Note that in CSS the . character is reserved for class names

If you have no control of this ID being output you can’t use it since the ID has a . in it. You can do this, but it might be too generic:

.message > span { background: red; }

---

Here’s another question on SO for valid css characters: Which characters are valid in CSS class names/selectors?