Why style a lists - html

Question

What is the point in styling a ul? I Have a following html structure
<div id='container'>
<div id='ui' class='quad'>
<div class='quadNav'>
<span class='quadTitle'>Urgent And Important</span>
<i class="fa fa-plus fa-2x addButton"></i>
</div>
<ul class='taskList'>
<li>Test</li>
<li>Test2</li>
</ul>
</div>
and the following css for styling the list
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
with the .taskList section empty the li elements will style as I want them to. But if I remove the .taskList section, the li's no longer style. What gives? What is supposed to go into the styling of a ul element vs a li element, I don't understand.
edit
I may not have properly worded my question, I have the following css
<style>
/* -------- General Styling ---------*/
*{
margin:0;
padding:0;
}
html, body {
font-size:20px;
}
#container{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
/*--------Quadrant Style ------- */
.quad{
position: relative;
width: 49.85%;
height: 49.8%;
font-size: .8em;
border: solid 1px black;
}
#ui{
float: left;
background-color: green;
}
#nui{
float: right;
background-color: red;
}
#uni{
float: left;
background-color: blue;
}
#nuni{
float:right;
background-color:yellow;
}
/*------- Quadrant Navigation Styling ------- */
.quadNav{
position:relative;
width:100%;
top:1em;
}
.quadTitle{
position: relative;
left:1em;
}
.addButton{
position:relative;
float:right;
right: 1em;
}
/*---------- task list styling ----------*/'
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
When I remove the empty .taskList{} declaration the .tasklist li styles stop working. I am trying to figure out why.

Answer 1

This could happen if you have an error in the preceding CSS, e.g.
.broken {
something
/* note no closing brace */
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
Now, the .taskList { line is actually inside the .broken {...} block, and the closing brace for .taskList closes that, so the following .taskList li { block works ok. But if you remove the .taskList block, you now wind up with the .taskList li styling inside the erroneous block, and your styling stops working.
EDIT: in your updated code, I can see the problem is a stray apostrophe on the line
/*---------- task list styling ----------*/'
Remove the trailing ' and it will fix it

Answer 2

the reason you lose the styling when you take out the taskList is because in your CSS you are targeting any li that is a child of a class called taskList. The reason you should do this is if you choose to have another set of li's on the page or any other page that may share this stylesheet you can style them differently by targeting a different class name. As far as the ul goes, if you do not use normalize or a css reset, ul's indent naturally without having to style it that way.

Answer 3

The li styling you currently have is applied only to the sub elements of the .taskList class.
If you want it to apply to all li's change your css to this:
li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}

Answer 4

You have:
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
So you are able to select lis in the ul with class of taskList and that's why style will be applied on those lis but if you remove the class taskList from the ul then the style won't be applied in the lis inside the ul with class taskList because you didn't add styles to lis directly.
If you want to style lis in any place of your page then you may use something like this:
li {
/*rules*/
}
Also to apply styles on all lis inside ul with class taskList you don't need to add a blank selection like you did in your question which is:
.taskList {
}
This is unnecessary in this case. You can apply stiles on all of your lis inside ul with class taskList even without the blank .taskList{...} in your stylesheet.

Answer 5

The problem is on the comment line right before .taskList{}, here you see:
Then when you keep the .taskList{}, that rule will be seen as invalid, while the next rules are OK, if removing that rule, then the rule .taskList li{} will be invalid, hence your problem.
Demo.