Question

So, I thought I knew my basic CSS, but my brain is twisting right now. I want to implement the 960 grid system to my website, but before I do, I want to fully understand the principle of the code.

I’ve got two questions. Firstly, the css regulating the width of the columns. We have the parent class “.container” to the left, and two classes to the right, where the “column” class is a descendant selector of the “one” respectively “two” classes. Is this saying that the class “column” is 40px wide if it is contained within “one” AND “container”? Simply put: I don’t really understand the relationship between these three elements.

.container .one.column          { width: 40px;  }
.container .two.columns         { width: 100px; }

Second question: When calling the classes in the HTML code, it seems that is done with the code

<div class=one column>Content</div>

right? But there is no class labeled “one column”, only the descendant selector “column” to “one”. What I am not getting here? Thanks a lot in advance.

Answer 1

In HTML, you can apply multiple classes to a single element. However the above syntax is incorrect; the value has to be encased in quotes:

<div class="one column">Content</div>

Without the quotes you end up with two attributes: class=one and column, which is different (and invalid HTML).

HTML doesn’t have a notion of selectors, so the space between them is not a descendant selector, nor is the attribute value itself a selector. Instead, the space is merely a separator used to distinguish them as two separate classes.

Consequently, to answer both questions, the selector .one.column applies to an element that has both of these classes.