Question

Currently i have a css snippet as follows:

ul.grid, ul.grid > li {
margin: 0; 
padding: 0; 
list-style-type: none;
}

can someone explain to me what is meant by

ul.grid, ul.grid > li ?

Correct me if i am wrong, ul.grid says that grid is a class? Can i some how use id instead of class?

Answer 1

ul.grid means a ul element with class grid.

ul.grid > li means an li element which is a direct child (and not a further descendant) of a ul element with class grid.

The comma separating the two means that the following rules will be applied to elements matching both selectors, so in other words, they will be applied to the ul and all of its children li elements.

Can i some how use id instead of class?

Yes. Replace the . with a # and make sure the elements have an id:

ul#grid, ul#grid > li { ... }

That would apply to, for example:

<ul id="grid">
    <li></li>
</ul>