In a Bangkok temple:

It is forbidden to enter a woman, even a foreigner, if dressed as a man.

Cocktail lounge , Norway :

Ladies are requested not to have children in the bar.

Doctors office, Rome :

Specialist in women and other diseases.

Dry cleaners, Bangkok :

Drop your trousers here for the best results.

In a Nairobi restaurant:

Customers who find our waitresses rude ought to see the manager.

On the main road to Mombassa, leaving Nairobi :

Take notice: when this sign is under water, this road is impassable.

On a poster at Kencom:

Are you an adult that cannot read? If so, we can help!

In a City restaurant:

Open seven days a week and weekends.

In a cemetery:

Persons are prohibited from picking flowers from any but their own graves.

Tokyo hotel’s rules and regulations:

Guests are requested not to smoke or do other disgusting behaviours in bed.

On the menu of a Swiss restaurant:

Our wines leave you nothing to hope for.

In a Tokyo bar:

Special cocktails for the ladies with nuts.

Hotel, Yugoslavia :

The flattening of underwear with pleasure is the job of the chambermaid.

Hotel, Japan :

You are invited to take advantage of the chambermaid.

In the lobby of a Moscow hotel across from a Russian Orthodox monastery:

You are welcome to visit the cemetery where famous russian and soviet composers, artists and writers are buried daily except thursday.

A sign posted in Germany ’s Black Forest :

It is strictly forbidden on our black forest camping site that people of different sex, for instance, men and women, live together in one tent unless they are married with each other for this purpose.. (This is the most hilarious…)

Hotel, Zurich :

Because of the impropriety of entertaining guests of the opposite sex in the bedroom, it is suggested that the lobby be used for this purpose.

Advertisement for donkey rides, Thailand :

Would you like to ride on your own ass?

Airline ticket office, Copenhagen :

We take your bags and send them in all directions.

A laundry in Rome :

Ladies, leave your clothes here and spend the afternoon having a good time.

Here’s the html code:

<ul class="rating">
<li><a class="worst" title="1 star" rel="nofollow" href="#a1">1</a></li>
<li><a class="bad" title="2 stars" rel="nofollow" href="#a2">2</a></li>
<li><a class="fair" title="3 stars" rel="nofollow" href="#a3">3</a></li>
<li><a class="good" title="4 stars" rel="nofollow" href="#a4">4</a></li>
<li><a class="best" title="5 stars" rel="nofollow" href="#a5">5</a></li>
</ul>

It uses multiple classes for ul: we will add to ul.rating one more class from the five available- from worst to best, in order to display the current rating.

And here’s the css

ul.rating {list-style: none;position: relative;width: 100px;height: 20px;background-image: url("ratings.png");background-position: -100px 0;background-repeat: no-repeat;padding: 0;left: 50px;margin-left: -50px;overflow: hidden;}
.rating li {margin: 0;padding: 0;float: left;}
.rating li a {display: block;position: absolute;width: 20px;height: 20px;text-indent: -9999px;overflow: hidden;z-index: 20;}
ul.worst { background-position: -80px 0;}
ul.bad { background-position: -60px 0;}
ul.fair { background-position: -40px 0;}
ul.good { background-position: -20px 0;}
ul.best { background-position: 0 0;}
.rating a.worst { left: 0; }
.rating a.bad { left: 20px; }
.rating a.fair { left: 40px; }
.rating a.good { left: 60px; }
.rating a.best { left: 80px; }
.rating li a:hover {background: transparent url("star.png") left top repeat-x;left: 0;z-index: 1;}
.rating a.worst:hover {width: 20px;}
.rating a.bad:hover {width: 40px;}
.rating a.fair:hover {width: 60px;}
.rating a.good:hover {width: 80px;}
.rating a.best:hover {width: 100px;}

You can check it out here: http://thinkwithstyle.com/rating/

• Attribute selectors

  • E[foo^="bar"]

    an E element whose “foo” attribute value begins exactly with the string “bar”.

    Example #selectdiv1 p[class^="bar"] {color:red}

    p.barstring – This paragraph should be colored in red, because it’s class attribute starts with ‘bar’.

    p.stringbarstring – This paragraph should be unstyled, although it’s class contains the word ‘bar’, but it does not start with it.

  • E[foo*="bar"]

    an E element whose “foo” attribute value contains the substring “bar”.

    Example #selectdiv2 p[class*="bar"] {color:red}

    p.barstring- This paragraph should be colored in red, because it’s class attribute contains ‘bar’.

    p.stringbarstring-This paragraph should be also colored in red, because it’s class attribute contains ‘bar’.

    p.string – This paragraph should be unstyled

  • E[foo$="bar"]

    an E element whose “foo” attribute value ends exactly with the string “bar”.

    Example #selectdiv3 p[class$="bar"] {color:red}

    p.stringbar – This paragraph should be also colored in red, because it’s class ends with ‘bar’.

    p.barstring- This paragraph should be unstyled.

    p.string – This paragraph should be unstyled

• Pseudo-classes:

  • E:root

    an E element, root of the document.

    Example html:root #selectdiv4 p:first-child{color:red}

    GOTCHA! In html the root element is itself. To show this selector in action, I had to declare html:root #selectdiv4 p:first-child{color:red}. And this paragraph should be red. Not in IE7, it doesn’t do it.

    This paragraph is unstyled, it is black (or grey, whatever).

  • E:nth-child(n)

    an E element, the n-th child of its parent.

    Example #selectdiv5 p:nth-child(2n){color:green} #selectdiv5 p:nth-child(2n+1){color:red}

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red

    This paragraph should be green.

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red. Not for IE7 and Firefox 2.

  • E:nth-last-child(n)

    an E element, the n-th child of its parent, counting from the last one.

    Example #selectdiv6 p:nth-last-child(2n){color:green} #selectdiv6 p:nth-last-child(2n+1){color:red}

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red

    This paragraph should be green.

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red.

    This paragraph should be green.

    This paragraph should be red. Not for IE7 and Firefox 2

  • E:nth-of-type(n)

    an E element, the n-th sibling of its type.

    Example #selectdiv7 p:nth-of-type(3) {color:red} #selectdiv7 p:nth-of-type(2n+1) {font-weight:bold}

    This paragraph should be bold.

    This paragraph should be unstyled.

    This is a div and should not be affected by the rule, because it’s not a paragraph.

    This paragraph should be red and bold.

    This paragraph should be unstyled.

  • E:nth-last-of-type(n)

    an E element, the n-th sibling of its type, counting from the last one.

    Example #selectdiv8 p:nth-last-of-type(1) {color:red} #selectdiv8 p:nth-last-of-type(3) {font-weight:bold}

    This paragraph should be unstyled.

    This paragraph should be bold.

    This is a div and should not be affected by the rule.

    This paragraph should be unstyled.

    This paragraph should be red.

  • E:last-child

    an E element, last child of its parent

    Example #selectdiv9 p:last-child {color:red}

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be red, because it’s the last child of it’s type.

  • E:first-of-type

    an E element, first sibling of its type

    Example #selectdiv10 p:first-of-type {color:red}

    This is a div and should not be affected by the rule, because it’s not a paragraph.

    This paragraph should be red.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

  • E:last-of-type

    an E element, last sibling of its type

    Example #selectdiv11 p:last-of-type {color:red}

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be unstyled.

    This paragraph should be red.

    This is a div and should not be affected by the rule, because it’s not a paragraph.

  • E:only-child

    an E element, only child of its parent

    Example 1 #selectdiv12 nly-child {color:red}Example 2 #selectdiv121 nly-child {color:red}

    This paragraph should be red, because is the only child of the outer div.

    This paragraph should be unstyled, because there are more children of the outer div.

    This is a div

  • E:only-of-type

    an E element, only sibling of its type

    Example 1 #selectdiv13 p:only-of-type {color:red}Example 2 #selectdiv131 nly-of-type {color:red}

    This paragraph should be red because it’s the only child of it’s type.

    This is a div.

    This paragraph should be unstyled, because there are several children of it’s type in the outer div.

    This paragraph should be unstyled, because there are several children of it’s type in the outer div.

    But this div should be red, because it’s teh only child of it’s type.

  • E:empty

    an E element that has no children (including text nodes)

    Example#selectdiv14 p:empty {padding:50px 0}

    This paragraph should be unstyled, because it’s not empty – text nodes count, including whitespaces.

    If above is a huge blank space, it means that the declaration works. Above is an empty paragraph containing a comment and nothing else.

  • E:target

    an E element being the target of the referring URI

    Example #selectdiv15 :target {background:#fc3}

    • This is the link to the target div 1
    • This is the link to the target div 2
    • This is the link to the target div 3

    This is the target div 1

    This is the target div 2

    This is the target div 3

  • E:enabled, E:disabled

    a user interface element E which is enabled or disabled

    Example #selectdiv16 :enabled {border:1px solid red} #selectdiv16 :disabled {border:1px solid blue}

    An input which should have a red border Inputs are enabled by default.

    An input with blue border because it was disabled.

    Option1

    A select box with blue border because it was disabled.

  • E:checked

    a user interface element E which is checked (for instance a radio-button or checkbox)

    Example #selectdiv17 input:checked {border:1px solid red}

    This is a radiobutton which should have a red border, because it has checked=”checked”.

    This is a checkbox and whould have red border only when it’s checked

    This is a text input and should not have red border even if it has checked=”checked”, because attribute “checked” is not meant for this type of inputs.

  • E:not(s)

    an E element that does not match simple selector s

    Example #selectdiv19 :not(.some_class) {color:red}

    This paragraph should be red, because it does not have class=”some_class”

    This paragraph should be unstyled, bacause it has class=”some_class”.

    This paragraph should be unstyled, bacause it has class=”some_class”.

    This heading h3 should be red, because it does not have class=”some_class”

    This heading h3 should be unstyled, because it does have class=”some_class”

• General sibling combinator:

  • E ~ F

    an F element preceded by an E element

    Example 1 #selectdiv20 h3 ~ p {color:red}
    Example 2 #selectdiv20 h3.blue ~ p {color:blue}

    This paragraph should be unstyled, because no heading h3 comes before it.

    This is a h3 heading

    This paragraph should be red because it is next and adjiacent to a heading h3.

    This paragraph should be red because it comes after a heading h3.

    This paragraph should be red because it comes after a heading h3

    This paragraph should be unstyled, because no heading h3 comes before it.

    This is a h3 heading

    This paragraph should be red because it is next and adjiacent to a heading h3.

    This paragraph should be red because it comes after a heading h3.

    This is a h3 heading class=”blue”

    This paragraph should be blue because it comes after a heading h3.blue

    This paragraph should be blue because it comes after a heading h3.blue