Suppose I define two classes in a CSS file with the same name, like

```
.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

```

Actually I found this code in a [jQuery UI](http://en.wikipedia.org/wiki/JQuery_UI) file. Why are there two classes? What is the difference if we write it like the following?

```
.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
    font-size: 1em;
}

```