CODEWITHSUNDEEP
css
exxcellent
exxcellent

Reputation: 659

Difficulty in understanding the following css syntax

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?

Upvotes: 0

Views: 52

Answers (3)

Andy Rose
Andy Rose

Reputation: 16974

ul.grid means any ul tag which also has a class of grid.
ul.grid > li represents any li tag which is a child of a ul tag which has a class of grid.

Upvotes: 0

Curtis
Curtis

Reputation: 103358

To use ID instead of class, replace the . with a # and use the ul ID:

ul#ulID, ul#ulID > li

Upvotes: 0

James Allardice
James Allardice

Reputation: 165971

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>

Upvotes: 7

Related Questions