CSS test (just for fun) 1

[BillyRayPreachersSon]

I went for a contract interview down at PwC ealier today, and one of the interviewers gave me the following CSS test, which I thought would make an interesting post.

A star for the first correct answer, although it really is just for fun!

What do the following 3 bits of CSS code do:

1) #p, a  { color: blue; }

2) p a    { color: blue; }

3) p.a    { color: blue; }

FYI, she said that most people didn't get all 3 right, so I was quite pleased to do so.

Dan

 

[WartookMan]

I think...
&quot;#p, a&quot; option, will set any elements with an ID of &quot;p&quot; (ie ID=&quot;p&quot to blue. It will also set any anchor (<a>) tags to blue.

&quot;p a&quot; is invalid.

&quot;p.a&quot; will assign any anchor tags, with a class of &quot;p&quot; to the values set in the style (in this case the text will be blue).

&quot;p.a&quot; will also have a higher cascading priority than the first entry, so that any attributes in 3 will overrule 1.

You've now made me want to go and try it out. I'm probably way off the mark...

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[MichiganRon]

1) Sets the foreground color of all objects with the id of &quot;p&quot; and of all all hyperlinks (a) to blue.

2) Sets the foreground color of all hyperlinks (a) within a paragraph (p) to blue.

3) Sets the foreground color of all paragraphs (p) with a class of &quot;a&quot; to blue.

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

 

[BillyRayPreachersSon]

Darkshadeau - Nice one ;o)

Sorry Pete - you were off on number 2 only. Funny, I thought that most people would get number 3 wrong (as I almost did!)

I thought that was quite a nice lttle test to remember.

Fun fun fun all the same!

Dan

 

[WartookMan]

You know I think he might be onto something...

I didn't even think that option 2 represented cascading. I've learnt something new today! Hooray, there's still room for more knowledge...

Mental note: Must drink more beer to kill off braincells to make room for newer ones.

Pete.



Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[BillyRayPreachersSon]

Pete,

BTW - Noticed you are a Notes developer. I haven't played with Notes since R4.6 (which I really liked). Played with R5 briefly for 10 mins, but never seems to like it. I found R4.6 much more intuitive.

Has it changed much since R5?

Dan

 

[WartookMan]

Dan,

Been working with Notes for about 4 years, in Notes 5. Mostly with Agents (Java and Notes Formula/Script) but also a lot of work on web forms (using JavaScript and CSS files - obviously room for improvement). Notes 6 is an even bigger improvement with more standard built-in functionality and web enhancements (caching and the like) for web development. Much better mail/collaborative functionality as well. Probably too much to discuss in here...

I was sort of thrown into the deep end regarding Notes, when I was consulting with Presence Online (POL) / Aptrix since their main product, Aptrix, was designed for Notes. That's how I got involved in Agents, and web forms.

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[Vragabond]

These questions were rather simple since they employed only techniques that are widely used and available throughout the browsers. But what if someone asked a question regarding some of the newer CSS2 and CSS3 selectors that look as scary as these ones?

:not(a);
p:not(.section);
body > h2:notfirst-of-type):notlast-of-type);


Well, this page will translate it in plain english (or even spanish) for you:

http://gallery.theopalgroup.com/selectoracle/

To prove its worthiness, here is its solution of the test:

Selector 1: #p, a
Selects any element with an id attribute that equals p
or
any a element.
Selector 2: p a
Selects any a element that is a descendant of a p element.
Selector 3: p.a
Selects any p element with a class attribute that contains the word a.

Truly a page worthy of a bookmark.

 

[BillyRayPreachersSon]

Bottom of the class for cheating

 

[Vragabond]

Hehe, when did being resourceful become cheating? Anyway, I guess I have no other choice:

<body id=&quot;Vragabond&quot; class=&quot;bottom cheater&quot;>

But I won't write my own CSS

 

[BillyRayPreachersSon]

Nice ;o)

Or you might have got away with:

<style type=&quot;bottom/cheater&quot;>
...
</style>

*grin*