Interview CSS Question

[kikix2125]

I went to an interview last week and one of the test question was:

Find the error(s) in below css:
.a [href$="about"] {color: #orange;}

And I had no idea what the answer to this was. Any body has any ideas?

Update: actually looking at this again, I think the # is extra. And I think the $ is unnecessary, also. Agree?

[xhtmlcoder]

The #orange colour is not a valid; as a keyword, i.e. orange. Also the .a shouldn't have had as space before the "[".

[kikix2125]

Thanks htmlcoder, is the $ correct?

[Stevie D]

I went to an interview last week and one of the test question was:

Find the error(s) in below css:
.a [href$="about"] {color: #orange;}

And I had no idea what the answer to this was. Any body has any ideas?

Update: actually looking at this again, I think the # is extra. And I think the $ is unnecessary, also. Agree?

The $ is not unnecessary, but it changes the meaning – it says "look for any links where the href ends with "about" – so it would match a link to "about" and "roundabout" but not "about-us".

I can see two definite mistakes and one probable mistake.

Start with the probable one – given that this is a declaration on a hyperlink, ie an <a> element (it must be given that it's targeting a specific href), I'm guessing that the selector should be a and not .a

So the two definite mistakes – if you use a named keyword for your colour then you don't use a #, that's only for when you're using hex codes – but 'orange' is not a valid CSS keyword so you must use the hex or rgb code.

It's easy to get confused, because HTML allows you to use 140 different named colours, but CSS only allows 16 named colours: aqua, black, blue, fuchsia, gray/grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. And of course no-one declares colours directly in the HTML any more, because it isn't 1997 any more, so the extra 124 colour names really do need to be quietly deleted off every website that still lists them.

[kikix2125]

So is below the correct version?

a[href$="about"] {color:#cc3232;}

[Stevie D]

So is below the correct version?

a[href$="about"] {color:#cc3232;}

Looks good to me! Or at least, that is valid and plausible CSS ... whether it is correct depends on what they were trying to do!

The only other thing I might change would be to change href$ to href*, which matches any string containing "about" rather than ending with it. That's important if you need to style links to "about.htm" rather than just "about", but whether that matters depends on the way the site is structured.

[kikix2125]

Thanks for the detailed explanation.

[dresden_phoenix]

ACTUALLY :

#orange is the ONLY clear syntax error.
the "$" is not an error at all, it just means "end of string"


The rest is valid CSS, but questionable LOGIC.


I would not assume the"." MIGHT be an error . The reasoning being ".a" is perfectly valid CSS, targeting class="a" but so is the "a" ( targeting anchor tags). Either could be intentional.

The space between the ".a" and "[" is also valid, especially if they meant ".a" as that targets any element with the href which ends in "about". this mean you could have a 4th level descendant anchor of a div with class ="a" and target it as shown in the question ( which leads me to believe that ".a" was intentional.

Even it if was "a [" and not ".a [" it's is still valid CSS, just pointless as only anchor tags may have the attribute HREF ( this would be an HTML validation error and not a CSS error), also you can't nest anchors so again it would be odd mean the anchor with the "href that end in about inside any other anchor"

a[href$="about"] {color:#cc3232;}

that is also valid CSS , but questionable logic. It is VERY VERY unlikely a file on the web will end in "about" as files must end in file types (".htlm", ".php", etc) So while valid, it may be quite useless.



if this was one of the choices, i would pick it instead :

 a[ href^="about"] {color:#cc3232;}

"^" means strings begins with. so it would target "about.html", "about_us.php",etc.







$ just means "ends in" ,

[ralph.m]

It is VERY VERY unlikely a file on the web will end in "about" as files must end in file types (".htlm", ".php", etc) So while valid, it may be quite useless.

A CMS URL will commony end just with "about", as in myslite.com/about.

[Paul O'B]

I went to an interview last week and one of the test question was:

Find the error(s) in below css:
.a [href$="about"] {color: #orange;}

I reckon that whoever posed that question didn't account for the fact the $= operator is valid in css3 and was expecting it to be invalid when its not.

The only real error is the #orange but as all others have pointed out the rest is valid if not wholly useful.

[xhtmlcoder]

Well, it was a poor example for sure I suspect it was just simply the # they were wanting the candidate to spot. Else perhaps they thought they'd be clever and add: E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" to see if the $ confused them though they also probably confused themselves as it had ambiguous aspects that although valid, were unlikely to be that productive.

[Stevie D]

I would not assume the"." MIGHT be an error . The reasoning being ".a" is perfectly valid CSS, targeting class="a" but so is the "a" ( targeting anchor tags). Either could be intentional.

Either could be correct, and so the question really needs to explain what the CSS is meant to do. I still say the balance of probability is that it was meant to be <a> rather than class="a", given the presence of href there.

The space between the ".a" and "[" is also valid, especially if they meant ".a" as that targets any element with the href which ends in "about". this mean you could have a 4th level descendant anchor of a div with class ="a" and target it as shown in the question ( which leads me to believe that ".a" was intentional.

Good point, I'd not even noticed that space there!

Even it if was "a [" and not ".a [" it's is still valid CSS, just pointless as only anchor tags may have the attribute HREF ( this would be an HTML validation error and not a CSS error), also you can't nest anchors so again it would be odd mean the anchor with the "href that end in about inside any other anchor"

I'm not sure that syntactically valid CSS that refers to invalid HTML could be considered "correct"!

that is also valid CSS , but questionable logic. It is VERY VERY unlikely a file on the web will end in "about" as files must end in file types (".htlm", ".php", etc) So while valid, it may be quite useless.

Sorry but that's just plain wrong. Many sites do away with visible file extensions and it's generally seen as good practice to do so.

if this was one of the choices, i would pick it instead :

 a[ href^="about"] {color:#cc3232;}

"^" means strings begins with. so it would target "about.html", "about_us.php",etc.

But it would break <a href="/about"> or any other relative, root or absolute reference, which is at least as likely as requiring a file extension.