Question

Probably a simple enough questions for you CSS buffs:

I have a simple unordered list:

<ul><li>Hello</li></ul>

I want to apply the following css class to it:

.style {
   height: 100%x;
   width: 100%;
}

.style ul {
    list-style-type: none;
}

.style li {
    //stuff
}

Assuming my list has no parent container (I am building a plugin so who knows how people will apply it) what is the most efficient way to apply these styles to these elements? I thought if I applied the .style class to ul than the list would automatically inherit all the child classes. This seems to not be the case. Do I have to loop each element and apply the specific class?

Answer 1

Apply style class to your ul and use the following CSS selectors:

ul.style {
   height: 100%x;
   width: 100%;
}

ul.style {
    list-style-type: none;
}

ul.style li {
    //stuff
}

---

.style ul is stating “style the any ul which is nested within an element which has a style class.”