Cascading Style Sheets

Factual Questions
1

I know a few things about CSS. I can happily make simple CSS files for any of the projects that I build from scratch (hopefully because I kind of know what I’m doing).

Recently I picked up an open source project, just for the heck of it, and started playing around with it to customise it for my needs. Then I ran into the stylesheet and I’m very confused.

eg.

.imgDetails table
{
    border: 2px solid #333333;
    border-collapse: collapse;
    padding: 5px 5px 5px 5px;
    margin: 2px 2px 2px 2px;
    border-spacing: 1px;
    background-color: #CCCCCC; /* #E0E0E0 */
    color: black;
    font-family:    Verdana, Arial, sans-serif;
    font-size: 70%;
    line-height:    100%;
}

.imgDetails table td
{
    border-top : 1px solid #333333;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Putting aside the actual CSS which I can work through, what happens when the same element appears to have multiple instances.

.imgDetails table
.imgDetails table td

Does this mean that when imgDetails is referred to in a <table> tag both the first lot and the second lot are used and if so, which one overrides which (or are they used to compliment each other rather than override each other)?

Does this also mean that imgDetails when used on a <td> tag only use the second lot?

What happens if imgDetails is used on a <div> or other tag, does any of this CSS apply?

I have been working through it and I think my failure to understand is in the inheritance / override area.

Someone help, please.

2

That’s a nested CSS selector. It means “wherever a <table> is found inside of an element of the class imageDetails, apply this rule”.
In the second style block, the condition is a <td> found inside a <table> inside an element of class imageDetails.

It’s worth noting that there are two ways of doing nested selectors in CSS. The W3C calls them the descendant method and the child method.

In the descendant method (the one you’ve got in your code), each element must be marked up somewhere inside the one to the left of it in order for the rule to be applied. However, the elements don’t have to directly contain one another.

In the child method, in order for the style to be applied, each element must be directly contained by the one to the left of it in the style rule.

An example:

The stylesheet:
.element1 h1 (The descendant method)
{
/* Style goes in here */
}

.element1 > h1 (The child method)
{
/* Style goes in here */
}

The HTML Markup:

<div class=“element1”>
<a href="#"><h1>This is a header</h1></a>
</div>

In this example, the style contained in the first style definition (the descendant method) would be applied, because h1 is contained somewhere inside the div.element1. The second style rule (the child method) would not be applied, because h1 is not directly contained inside of div.element1 (there is an <a> in the way).

It’s also worth noting that Internet Explorer does not support the child method. Any rules contained in a child-method selector are ignored. That means that for all intents and purposes, the child method is not useful unless you have a block of style you want to hide from IE.

3

Oh, and consult the official W3C specification for more details.