CSS in Dashcode Widget

Hi there

I have been looking at the CSS code (SafariStyle.css) behind Apple's RSS Template widget in Dashcode (1.0).

Was hoping someone could explain what '.content' and '.content > div' refer to below:

.content {
font: normal 11px Helvetica, sans-serif;
color: #333333;
line-height: 130%;
overflow: hidden;
display: -khtml-box;
-khtml-box-orient: vertical;
-apple-line-clamp: 100%;
}

.content > div {
overflow: hidden;
position: relative;
}

".content" is a general CSS style class than can be applied to any type of element.

".content > div" is a selector that indicates the style is only applied to a "div" element that is a child of an element that has had the ".content" style class applied to it.

Excellent, thanks!

Below are some more variations I was hoping you could also explain.

.content .subject {
border-bottom: 2px solid transparent;
-khtml-box-flex: 60;
}

.content a.articlehead[href] > .subject:hover {
/* a.articlehead has no href if there's no permalink */
border-bottom: 2px solid #888;
}

.author, .date {
color: rgb(177,177,177);
font-size: 85%;
letter-spacing: 0.07em;
}

".content .subject" - a descendant selector. It specifies that the style is applied to any element of class "subject" that is a descendant (child, grandchild, etc.) of any element of class "content".

".content a.articlehead[href] > .subject:hover" - wow, this is a fun one! The border-bottom style defined here is to be applied only when the cursor is hovering over any element of class "subject" that is a child directly underneath an "a" element of class "articlehead" that also must include an "href" attribute, and which itself is a descendant of an element of class "content". Whew! I don't know who wrote that, but they have a mean streak. At least they included a potentially helpful comment.

".author, .date" - the comma indicates there are two entirely distinct selectors being defined here, so any element with a class of either "author" or "date" would use the specified style info.

If you're going to be dealing with a lot of this stuff, you probably should get a book on CSS - the O'Reilly book "CSS: The Definitive Guide" is quite good I suspect, as I have its predecessor by the same author. Or at least you may want to check out some of the CSS resources listed at Learning CSS.

Thanks, that's great! Clearly you know your stuff.

I probably don't need such 'sophisticated' CSS code in my widget, but understanding how the templates, supplied with Apple's Dashcode, work helps.

I did check out the W3 Schools website, to quickly get up to speed with JavaScript and CSS, but it didn't help with most of the examples in this thread.

Thanks again.