SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    New York
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interview CSS Question

    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?

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The #orange colour is not a valid; as a keyword, i.e. orange. Also the .a shouldn't have had as space before the "[".

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    New York
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks htmlcoder, is the $ correct?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kikix2125 View Post
    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.

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Location
    New York
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So is below the correct version?

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

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kikix2125 View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    Jun 2012
    Location
    New York
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed explanation.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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 :
    Code:
     a[ href^="about"] {color:#cc3232;}
    "^" means strings begins with. so it would target "about.html", "about_us.php",etc.







    $ just means "ends in" ,

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kikix2125 View Post
    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.

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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 :
    Code:
     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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •