Question

So if I have a CSS class named “class-name”, what does the following mean?

.class-name {
  margin: 0;
}

And why, if I had the following HTML

<div id="some-id">
    <ul>
        <li class="class-name">
    ...

would the selector

#some-id .class-name ul li

not exist?

Answer 1

The first one means what you probably think it means: Any HTML element with the class class-name will have a margin of 0 width (for each side, ie. top, bottom, left and right).

The second question is a bit more subtle. This selector

#some-id .class-name ul li

Applies only to an li that is found under a ul, found under an element with a class of class-name, found under an element with id some-id.

You would have to use a selector like this to apply to the HTML you have above:

#some-id ul li.class-name

Note that there is no space between li and .class-name in that selector. Specifying li.class-name means “an li with the class name class-name“, whereas li .class-name (with a space) would mean “element with class class-name found below an li“.