What does this CSS code mean

Hi i am being confused with this css code which i came across

ul.errorlist { background-color: blue;............;}
.errorlist li {background-color: red;...;}

I get the first line which means that errorlist is the classname and ul is the tag
so in order to use those properties i would so something like this
<ul class="errorlist">This will have a background blue colour </ul>

What i dont understand is the second statement
.errorlist li {background-color: red;...;}

What does that mean it doesnt have a tag in front of it and its just a .classname ? how would you go about using its properties ??? Any explaination would be appreciated...

it means that any li that is a child of class="errorlist" will have a red bg applied to it... not only ul's , but ol's as well

A class (or ID) selector without element name/selector in front is basically just saying “look for any element with that class/ID and style it accordingly”. Writing .errorlist {…} is actually the same as writing *.errorlist {…}; the asterisk is a generic selector that adresses all elements.

Consider this code:

.errorlist {color: blue;}
ul.errorlist {color: red;}


The first line would mean any and all elements that have a class named “errorlist” would get blue text, e. g. <div class="errorlist">, <h1 class="errorlist">, <kbd class="errorlist">, <ul class="errorlist">, etc.

Now, the second line will override the first one and apply a red color to all unordered lists that have that class but not to the other element types.

And .errorlist li {…} would apply to any and all list items (<li>) that are (direct or indirect) children of any element that has this class. This could, for example, apply to:

<div class="errorlist">
<ol>
<li>this text will be styled</li>
<li>this text will also be styled</li>
</ol>
<p>this text won’t be styled</p>
</div>

… but also to:

<ul class="errorlist">
<li>this text will be styled</li>
<li>this text will also be styled</li>
</ul>

… and theoretically even to:

<p class="errorlist">
<li>this text will be styled</li>
<li>this text will also be styled</li>
</p>

… although that is invalid code, of course.