Why does my CSS selector not identify these elements correctly?

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>

As I said in a comment below the contents of the span are not set by me so I have to assume that it will always be an id with a value of `something.errors`. — Harte, May 11 '11 at 18:21

score 4 · Answer 1 · answered May 11 '11 at 18:24

4

You could use the CSS3 Attribute Selector:

[id$=errors] { ... }

This will select any element whose id ends with the value "errors".

Note that browser support is a little iffy.

answered May 11 '11 at 18:24

sdleihssirhc

42,000
6
53
67

score 2 · Answer 2 · answered May 11 '11 at 18:18

2

I think you were trying to have errors as a class instead of in ID attribute. You can do:

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

It would work the CSS selector you already have:

.message .errors {
  background: red;
}

answered May 11 '11 at 18:18

tyronegcarter

3,876
4
21
24

Unfortunately I can't alter the contents of the span to include a class value so that won't work. – Harte May 11 '11 at 18:22

score 1 · Accepted Answer · edited May 23 '17 at 11:55

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?

edited May 23 '17 at 11:55

Community

1
1

answered May 11 '11 at 18:17

hunter

62,308
19
113
113

Thanks but that won't identify the `airbus.errors` element - it needs to work for both. – Harte May 11 '11 at 18:19
That ID is invalid for CSS, so you're in a bit of a pickle – hunter May 11 '11 at 18:31
Thanks - the right arrow selector (whatever that's called) works fine. How is that different from saying: `.message span` without the right arrow? – Harte May 11 '11 at 18:32
`.message > span` meatches `span` tags that are immediate child of `.message`, `.message span` matches that all descendant `span` tags of `.message` – hunter May 11 '11 at 18:38

Jason McCreary · Answer 4 · 2011-05-11T18:25:46.343

1

Your names are invalid. CSS class and id names should only be alphanumeric values and can include a - or _. Check the docs for the full naming convention syntax.

Drop the ., example: <span id="airbus_errors">

However, by your CSS, I think what you are meaning to do is share an errors class. In which case, this should be your markup:

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

edited May 11 '11 at 18:25

answered May 11 '11 at 18:18

Jason McCreary

71,546
23
135
174

The name of the ids are not controlled by me. They're always going to be `something.errors`. But I want to change their background color with a single rule. – Harte May 11 '11 at 18:20
2

@hunter - you have a doc link to back that up? – Jason McCreary May 11 '11 at 18:20
CSS classes must be declared using "." at the beginning. – PachinSV May 11 '11 at 18:23
Fair enough. I've updated my answer with a link. Looks like I still acquired a downvote though. – Jason McCreary May 11 '11 at 18:24
@Jason - see this SO answer: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names for a complete list of characters you can use. You can use `_` or `-` – hunter May 11 '11 at 18:25
@Jason, I didn't down vote you, but I will give you +1 since you were more right than the OP – hunter May 11 '11 at 18:25
@hunter, LOL. Thanks. I wasn't accusing. I just think the drive-by downvoters are lame. – Jason McCreary May 11 '11 at 18:28

Rich Adams · Answer 5 · 2011-05-11T18:29:02.410

If you want it to work for both, then you need to give them a common class. IDs are unique, so you'd have to specify #airbus.errors, #boeing.errors {...}, etc. To do it in one CSS rule you need to give them both a common class such as errors.

.message .errors {
    background: red;
}

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

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

If you can't make it a class for some reason, then you have no choice but to be explicit and set it for each ID unless you use CSS3 attribute selectors.

.message #airbus.errors,
.message #boeing.errors {
    background: red;
}

If you're developing for browsers which support CSS3 (so not IE), then you can achieve what you want with this, (see CSS3 spec for more info)

.message span[id$="errors"] {
    background: red;
}

I don't have control over the contents of the span - which is injected by another process so all I have to work with is a bunch of IDs. — Harte, May 11 '11 at 18:25
In that case, your choices are either CSS3, or to explicitly specify all the IDs. — Rich Adams, May 11 '11 at 18:32

score 0 · Answer 6 · answered May 11 '11 at 18:31

Try the attribute selector and its variations

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

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

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

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

<div class="message">
<span id="no.error">error</span>
</div>

</body>
</html>

Here is the CSS

[id$=".errors"]
{
color: red;
}

score 0 · Answer 7 · answered May 11 '11 at 18:35

There's really not much you can do, especially cross-browser, to fix that kind of ugly CSS. I see one really portable alternative, and that's this JavaScript:

var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
     var id = spans[i].id;
     if(id && id.length > 7 && id.substring(id.length - 7) === '.errors') {
          spans[i].id = id.substring(0, id.length - 7);
          spans[i].className = spans[i].className ? spans[i].className + ' errors' : 'errors';
     }
}

You could then refer to your elements as span.errors in your CSS selector. This is really not a good solution, but then again, there's not much else you can do. If the IDs have to stay the same, just remove the spans[i].id = ... line. If they absolutely can't have a class then you can use some fancy JavaScript to read the CSS selector and apply inline styles based on that, too.

Why does my CSS selector not identify these elements correctly?

7 Answers7