CSS: What Does the Space Do?

Category: CSS

Had a question this morning about the following syntax in CSS. Thought I would share it here since it was also a good review of my own understanding.

Question: What is the difference between the following 2 CSS entries:

#feature.leftcol

And

#feature .leftcol

Specifically, how does the addition or removal of the space effect the CSS?

Answer:

The space actually has a significant effect on the CSS.

No Space refers to an ID (#feature) that has been assigned a CLASS (.leftcol).

Adding a space refers to any CHILD of the ID (#feature) with a CLASS called (.leftcol) .

Here are examples of applying these styles to HTML:

Space:

<div id="feature" class="leftcol">

No Space:

<div id="feature">
    <h2>Latest News</h2>
              <div class="leftcol">

Leave a Reply

My Previous Chat

My Photos